/* Corelevo · design tokens (single source of truth) Generated with ultimate-ui-design (web paradigm) from the Corelevo logo (static/brand): green #00CA8F · cyan #00AEFC · violet #5C5CFB (the circle of people and the book) and navy #011A48 (the wordmark), which is also the ink of the UI. Light theme is the default. Dark applies only when the user picks it: . Every fg/bg pair below was measured (WCAG 2 AA + APCA) — see tokens.json for the DTCG export. */ @font-face { font-family: "Roboto"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/static/fonts/roboto-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/static/fonts/roboto-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: light; /* ---------- primitives: identity ---------- */ --color-identity-green: #00CA8F; --color-identity-violet: #5C5CFB; --color-identity-cyan: #00AEFC; --color-identity-navy: #011A48; /* ---------- semantic: light ---------- */ --color-bg: #F4F6FB; --color-fg: #011A48; --color-fg-2: #33405F; /* body copy that is not the headline */ --color-surface: #FFFFFF; --color-surface-2: #EEF1F8; --color-border: #E0E4EF; --color-border-strong: #C7CEDF; --color-muted-fg: #56617C; /* 5.7:1 on bg */ --color-brand: #4B4BE6; /* violet deepened for white text: 6.1:1 (raw logo #5C5CFB is 4.6:1) */ --color-brand-hover: #3D3DD1; --color-on-brand: #FFFFFF; --color-brand-soft: #ECECFF; --color-on-brand-soft: #3D3DC7; --color-danger: #C0362C; --color-danger-soft: #FDECEA; --color-success: #007A50; --color-success-soft: #E3F8EF; --color-warning: #8C5A00; --color-warning-soft: #FFF3DC; --color-link: #0070A8; --color-ring: #4B4BE6; --color-scrim: rgb(1 26 72 / 0.40); /* ---------- elevation: two layers, ambient + direct ---------- */ --shadow-sm: 0 1px 2px rgb(1 26 72 / 0.05), 0 1px 3px rgb(1 26 72 / 0.06); --shadow-md: 0 1px 2px rgb(1 26 72 / 0.04), 0 8px 24px rgb(1 26 72 / 0.07); --shadow-lg: 0 2px 6px rgb(1 26 72 / 0.06), 0 18px 48px rgb(1 26 72 / 0.12); /* ---------- space (base 4px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* ---------- radius: nested-safe ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* ---------- type: Roboto, one family, weight + size carry the hierarchy ---------- */ --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Roboto Mono", ui-monospace, Consolas, monospace; --text-xs: 12px; --text-sm: 13.5px; --text-md: 15px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: clamp(28px, 3.6vw, 36px); --leading-body: 1.6; --leading-tight: 1.2; /* ---------- motion ---------- */ --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---------- component: knowledge map (the canvas reads these) ---------- */ --map-bg: #F3F5FB; --map-bg-2: #FFFFFF; --map-doc: #0092D6; --map-concept: #5C5CFB; --map-risk: #E5484D; --map-person: #33405F; --map-edge: #98A0BA; --map-label: #011A48; --map-up: #00A870; --map-focus: #011A48; --map-glass: rgb(255 255 255 / 0.86); --map-glass-line: rgb(1 26 72 / 0.10); --map-glass-fg: #011A48; --map-glass-muted: #56617C; --map-panel-bg: #F5F5FF; --map-panel-line: #DCDCFA; --map-panel-fg: #011A48; --map-panel-muted: #56617C; --map-panel-eyebrow: #3D3DC7; --map-chip-bg: rgb(1 26 72 / 0.05); --map-chip-line: rgb(1 26 72 / 0.12); --map-stars: 0; } /* ---------- semantic: dark (opt-in) ---------- */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0A1230; --color-fg: #EEF1F8; --color-fg-2: #D2D8E6; --color-surface: #111A3A; --color-surface-2: #1A2448; --color-border: #26305A; --color-border-strong: #36416E; --color-muted-fg: #B0B9D0; --color-brand: #B4B4FF; /* 9.7:1 on bg; black text on it passes APCA */ --color-brand-hover: #C6C6FF; --color-on-brand: #000000; --color-brand-soft: #26265A; --color-on-brand-soft: #C9C9FF; --color-danger: #FF8A7E; --color-danger-soft: #3A1A18; --color-success: #5BE3AE; --color-success-soft: #0F3326; --color-warning: #F5C46B; --color-warning-soft: #3A2A0C; --color-link: #7FD4FF; --color-ring: #B4B4FF; --color-scrim: rgb(0 0 0 / 0.55); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30), 0 1px 3px rgb(0 0 0 / 0.20); --shadow-md: 0 1px 2px rgb(0 0 0 / 0.30), 0 8px 24px rgb(0 0 0 / 0.28); --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.35), 0 18px 48px rgb(0 0 0 / 0.45); --map-bg: #070D26; --map-bg-2: #131C42; --map-doc: #3CC8FF; --map-concept: #9C9CFF; --map-risk: #FF6A5F; --map-person: #E9ECF5; --map-edge: #7E88A8; --map-label: #DDE3F2; --map-up: #3EF0B0; --map-focus: #FFFFFF; --map-glass: rgb(7 13 38 / 0.62); --map-glass-line: rgb(255 255 255 / 0.12); --map-glass-fg: #DDE2F0; --map-glass-muted: #AEB6CC; --map-panel-bg: #111A3A; --map-panel-line: #28336A; --map-panel-fg: #DDE2F0; --map-panel-muted: #AEB6CC; --map-panel-eyebrow: #3EF0B0; --map-chip-bg: rgb(255 255 255 / 0.07); --map-chip-line: rgb(255 255 255 / 0.12); --map-stars: 1; }