/* ═══════════════════════════════════════════════════════════════════════════ KAILEY BROWN — DESIGN TOKENS The single source of truth for color and type across every page. The source platform defined its palette in four separate :root blocks that drifted apart. They are consolidated here so the theme is changed in exactly one place. Load this BEFORE any other stylesheet. Palette intent: white paper, true black ink, red as the pop. A high-contrast monochrome aesthetic — pure white ground, black type and lines, and one vivid red artery running through it. Red carries meaning, never decoration. Reserve it for the single primary action on a screen, the active nav state, the logo mark, and genuine destructive or error states. Everything else is black on white. ═══════════════════════════════════════════════════════════════════════════ */ /* Audrey is not a Google Font, so it cannot come through the Google Fonts the way the body face does. Drop a licensed audrey.woff2 into /assets/fonts/ and this picks it up automatically. Until then every --font-display usage falls through to Jost, which is a near match, rather than to Georgia. font-display: swap keeps text visible while it loads. */ @font-face { font-family: 'Audrey'; src: url('/assets/fonts/audrey.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Native form controls, scrollbars and UA defaults render light to match. */ color-scheme: light; /* ── Paper and ink (roles, not literals: "paper" is the page ground) ──── */ --paper: #FFFFFF; /* pure white page ground */ --surface: #FAFAFA; /* cards, raised panels */ --surface-2: #F1F1F1; /* neutral grey lift: hero grounds, wells */ --ink: #1A1A1A; /* body text — near-black, not soft charcoal */ --ink-strong: #000000; /* headings — true black for maximum punch */ --ink-muted: #6E6E6E; /* captions, meta, placeholders */ --border: rgba(0, 0, 0, 0.14); /* ── The pop ───────────────────────────────────────────────────────────── */ --red: #E31837; /* vivid signal red — the one loud thing */ --red-dark: #B80D28; /* pressed / hover state of filled-red controls */ --red-muted: #A32E3A; /* dusty red buttons settle into on hover */ --red-tint: rgba(227, 24, 55, 0.08); /* hover washes, selected rows */ --border-red: rgba(227, 24, 55, 0.32); /* ── Type ──────────────────────────────────────────────────────────────── */ --font-display: 'Audrey', 'Jost', Georgia, serif; --font-body: 'Jost', system-ui, -apple-system, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace; /* ── Structural (carried over unchanged) ───────────────────────────────── */ --nav-h: 64px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* ═════════════════════════════════════════════════════════════════════════ LEGACY ALIASES The ported stylesheet references these names in thousands of places. Rather than rewrite every call site, each old name is re-pointed at its new role, which inverts the whole theme in one move. Note --white and --black resolve to their OPPOSITES: on a light theme, "white text" means black ink and a "black background" means paper. That is why the names above are role-based. Do NOT "fix" --black back to black; use --ink-strong / --paper in new code and let these fade out. ═════════════════════════════════════════════════════════════════════════ */ --black: var(--paper); --black-2: var(--surface); --charcoal: var(--surface-2); --gray-dark: #E7E7E7; /* was a lift off black, now a step off paper */ --gray-mid: var(--ink-muted); --gray-light: var(--ink-muted); --gray-400: var(--ink-muted); --gray-600: #575757; /* darker than --ink-muted: body-size text needs AA */ --surface2: #ECECEC; --white: var(--ink-strong); --white-dim: rgba(26, 26, 26, 0.78); --white-soft: var(--ink); --off-white: var(--ink); --accent: var(--ink-strong); --red-light: var(--red-tint); --red-glow: rgba(227, 24, 55, 0.15); } /* ═══════════════════════════════════════════════════════════════════════════ STRUCTURAL BLACK The reference aesthetic frames a white body with solid black masses — buildings around the red artery. This scope is those masses: navigation rails, footers, and accent bands render as black structure while the main body stays white. Because every stylesheet resolves color through the role tokens, and custom properties resolve at the element that uses them, re-assigning the roles on a scope re-skins everything inside it — including the legacy aliases, which chain through these roles. Add the black frame to a new surface with class="on-black"; the rails listed here are black by design. ═══════════════════════════════════════════════════════════════════════════ */ .on-black, .sidebar, .courses-sidebar, .crm-sidebar, .console-topbar, .academy-header, .crm-appbar { color-scheme: dark; --paper: #0B0B0C; --surface: #17171A; --surface-2: #101012; --ink: #C9C9C9; --ink-strong: #F7F7F7; --ink-muted: #8F8F8F; --border: rgba(255, 255, 255, 0.14); --red-tint: rgba(227, 24, 55, 0.14); --gray-dark: #232326; --gray-600: #ABABAB; --surface2: #202024; --white-dim: rgba(247, 247, 247, 0.72); /* The legacy aliases must be RESTATED here, not just the roles: an alias declared on :root substitutes its var() there and inherits the already- computed (light) value, so it never sees this scope's roles. Declaring the same alias→role mapping on the scope makes substitution happen where the dark roles are in effect. */ --black: var(--paper); --black-2: var(--surface); --charcoal: var(--surface-2); --gray-mid: var(--ink-muted); --gray-light: var(--ink-muted); --gray-400: var(--ink-muted); --white: var(--ink-strong); --white-soft: var(--ink); --off-white: var(--ink); --accent: var(--ink-strong); --red-light: var(--red-tint); } .on-black { background: var(--paper); } /* color must be (re)declared ON the scope, not inherited: text color computed at body resolves against the light tokens and would arrive here black. */ .on-black, .sidebar, .courses-sidebar, .crm-sidebar, .console-topbar, .academy-header, .crm-appbar { color: var(--ink); }