/* ============================================================ Kyber — Midnight Signal Semantic design tokens. Single source of truth for the palette. Derived from the V1C landing concept: near-black canvas, bone text, Kyber-green signal. Token names match the vocabulary the dashboard already uses (--bg / --surface / --text / --brand) so every page speaks the same language. Pages must consume these semantic tokens, never raw hex, so the whole site can be re-themed from this file alone. ============================================================ */ :root { /* ---- Canvas & surfaces ---------------------------------- */ --bg: #0E0F11; /* page canvas */ --surface: #17181C; /* cards, inputs, panels */ --surface-sunk: #121317; /* recessed areas, table stripes */ --surface-dark: #08090A; /* sidebars, hero & footer blocks */ --surface-raise: #1E1F24; /* hover state on a surface */ --sidebar-bg: #08090A; /* app chrome (dashboard) */ /* ---- Lines ---------------------------------------------- */ --border: #26272C; --border-strong: #34363C; /* ---- Type ----------------------------------------------- */ --text: #EFEDE7; /* primary — 16.4:1 on --bg */ --text-muted: #A8A59D; /* secondary — 7.9:1 */ --text-faint: #918E86; /* tertiary — 5.8:1, AA on every surface incl. --brand-soft */ --text-invert: #0E0F11; /* on --brand or --text fills */ /* ---- Brand: Kyber green --------------------------------- The logo green is #073A26 — a forest so deep it disappears against this canvas (1.4:1). On midnight the brand carries at a lifted weight of the same hue (154° vs the logo's 156°); the logo green itself survives as --brand-ink, for type and fills on paper. Light mode swaps the two. */ --brand: #2ED08A; /* 9.6:1 on --bg */ --brand-rgb: 46 208 138; /* washes + canvas/JS drawing */ --brand-hover: #4CE3A2; --brand-press: #22B375; --brand-soft: #07231A; /* tinted fill / focus glow */ --brand-ink: #073A26; /* the logo green — on LIGHT ground */ /* Accent as TEXT. On the dark ground that is the lifted green; on paper it is ~1.4:1, so light mode swaps this for the logo green. Use --brand for fills, --brand-text for type. */ --brand-text: var(--brand); /* ---- Interaction washes --------------------------------- Lifted out of the pages so a hover doesn't paint white on white once the canvas flips. */ --hover-wash: rgba(255,255,255,.06); --nav-shadow: 0 10px 34px rgba(0,0,0,.46); --nav-shadow-lg: 0 14px 42px rgba(0,0,0,.62); /* ---- Status --------------------------------------------- */ --ok: #6FCF7F; --ok-soft: #0F2113; --warn: #F0B44A; --warn-soft: #2A1F08; --danger: #FF7060; --danger-soft: #2B1310; --info: #5AC8E0; --info-soft: #0B2129; --neutral: #A8A59D; --neutral-soft: #1C1D22; /* Type sitting ON a solid status fill. Kept separate from --text-invert because the two answer to different fills: the status hues are LIGHT on midnight and DARK on paper, while --text-invert answers to --brand, which flips the other way. */ --on-status: var(--text-invert); /* ---- Radii ---------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-pill: 999px; /* ---- Elevation ------------------------------------------ Dark UI reads depth from light, not shadow — these stay subtle and lean on the border tokens for definition. */ --shadow-1: 0 1px 2px rgba(0,0,0,.40); --shadow-2: 0 4px 14px rgba(0,0,0,.50); --shadow-brand: 0 6px 20px rgb(var(--brand-rgb) / .14); /* ---- Spacing -------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* ---- Typography ----------------------------------------- */ --font-display: 'Archivo', system-ui, -apple-system, sans-serif; --font-body: 'Archivo', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --ease: cubic-bezier(.4,0,.2,1); } /* Dark canvas needs light form controls and scrollbars, or the browser paints its default light chrome straight through. */ :root { color-scheme: dark; } /* ============================================================ DAYLIGHT — the light half of the switch. Same semantic names, warm-paper ground rather than a clinical white; the site's type is a bone/ink pairing and pure #FFF canvas makes it read cold. Only values move here, so any page built on tokens re-themes for free. On paper the brand goes the other way: the logo green #073A26 is the accent outright, for both type and fills, and the lifted midnight green would be far too weak to survive here. Because the fill is now DARK, --text-invert flips to white. ============================================================ */ [data-theme="light"] { --bg: #F4F2EE; /* warm paper */ --surface: #FFFFFF; /* cards lift off the canvas */ --surface-sunk: #EAE7E1; --surface-dark: #E4E0D8; /* deep blocks invert to the top */ --surface-raise: #EDEAE4; --sidebar-bg: #FFFFFF; --border: #D8D4CC; --border-strong: #BAB5AB; --text: #16161A; /* 15.8:1 on --bg */ --text-muted: #4B4A46; /* 8.9:1 */ --text-faint: #67655E; /* 5.6:1 */ --text-invert: #FFFFFF; /* the brand fill is dark here */ --brand: #073A26; /* the logo green — 11.5:1 on --bg */ --brand-rgb: 7 58 38; --brand-hover: #0C5238; /* dark fills lift, not deepen */ --brand-press: #042518; --brand-soft: #E2F0EA; --brand-ink: #073A26; --brand-text: var(--brand-ink); /* 11.5:1 on --bg */ --ok: #1E7A32; --ok-soft: #E3F3E6; --warn: #8A5A00; --warn-soft: #FAEFD8; --danger: #B32A1C; --danger-soft: #FBE4E1; --info: #0F6B80; --info-soft: #DFF1F6; --neutral: #4B4A46; --neutral-soft: #EAE7E1; --on-status: #FFFFFF; /* status hues are dark on paper */ --shadow-1: 0 1px 2px rgba(22,22,26,.07); --shadow-2: 0 4px 14px rgba(22,22,26,.10); --shadow-brand: 0 6px 20px rgb(var(--brand-rgb) / .26); --hover-wash: rgba(22,22,26,.055); --nav-shadow: 0 10px 30px rgba(22,22,26,.10); --nav-shadow-lg: 0 14px 38px rgba(22,22,26,.15); color-scheme: light; } ::selection { background: var(--brand); color: var(--text-invert); }