/* ============================================================ SEMANTIC TOKENS — token NAMES are the shipped ones from src/app/globals.css. Only the VALUES have moved: slate → warm graphite, indigo → cobalt. Four themes: Daylight (default), Midnight, Ocean, Ember. Apply with . ============================================================ */ /* ── Theme: Daylight (default) ───────── */ :root, [data-theme="daylight"]{ --bg-page: #F5F5F3; /* was #F8FAFC */ --bg-sidebar: #0E1B2C; /* navy — matches the shipped app */ --bg-card: #FFFFFF; --bg-card-2: #DEDEDA; /* was #E2E8F0 */ --bg-card-alt: #FAFAF9; /* was #F1F5F9 */ --bg-input: #F5F5F3; /* was #F1F5F9 */ --bg-ink: #15314D; /* the logo navy — inverted panels, toasts, floor board */ --ink-strong: #141413; /* was #0F172A */ --ink-muted: #5A5A53; /* was #475569 — 6.6:1 on --bg-card */ --ink-faint: #74746C; /* was #64748B — 4.9:1 on --bg-card, AA */ --ink-on-brand: #FFFFFF; --stroke: rgba(20,20,19,0.08); --stroke-card: rgba(20,20,19,0.07); --stroke-strong: rgba(20,20,19,0.14); --surface-0: #FFFFFF; --surface-1: #F5F5F3; --surface-hover: rgba(20,20,19,0.04); --surface-active:rgba(20,20,19,0.08); /* ADDITION */ --brand-1: #3A5EFF; /* brighter, so it separates from the navy substrate */ --brand-2: #1E36DB; /* AA-safe with white type on top */ --brand-dim: rgba(58,94,255,0.10); --brand-dark: #1728A8; /* was #4338CA */ --ok: #12A150; --ok-dim: rgba(18,161,80,0.10); --danger: #C81E1E; --danger-dim: rgba(200,30,30,0.08); --warning: #8A5200; --warning-dim: rgba(224,134,0,0.12); --info: var(--brand-1); --info-dim: var(--brand-dim); --ok-dot:#12A150; --warning-dot:#E08600; --danger-dot:#DC2626; --info-dot:#3A5EFF; --focus-ring: rgba(58,94,255,0.18); --focus-border: rgba(58,94,255,0.55); --shadow-sm: 0 1px 2px rgba(20,20,19,0.06); --shadow-card: 0 1px 3px rgba(20,20,19,0.07), 0 4px 12px rgba(20,20,19,0.05); --shadow-md: 0 4px 16px rgba(20,20,19,0.10); --shadow-lg: 0 12px 32px rgba(20,20,19,0.14); --shadow-focus: 0 0 0 3px rgba(58,94,255,0.18); --scrollbar-thumb: rgba(20,20,19,0.14); --scrollbar-thumb-hover: rgba(20,20,19,0.24); --logo-filter: none; /* @kind other */ --accent-loud:var(--brand-1); --accent-text:var(--brand-2); --accent-dim:var(--brand-dim); color-scheme:light; } /* ── Theme: Midnight ─────────────────── */ [data-theme="midnight"]{ --bg-page: #0A0A09; /* was #0D1117 */ --bg-sidebar: #0F0F0E; /* was #10161F */ --bg-card: #1B1B18; /* was #161D2D */ --bg-card-2: #2C2C28; /* was #1C253A */ --bg-card-alt: #151513; /* was #131929 */ --bg-input: #2C2C28; --bg-ink: #FAFAF9; --ink-strong: #F2F1EE; /* was #E8ECF0 */ --ink-muted: #A8A79E; /* was #8496AA */ --ink-faint: #8A897F; /* was #6E7E94 */ --ink-on-brand: #FFFFFF; --stroke: rgba(255,255,255,0.09); --stroke-card: rgba(255,255,255,0.07); --stroke-strong: rgba(255,255,255,0.16); --surface-0: #1B1B18; --surface-1: #2C2C28; --surface-hover: rgba(255,255,255,0.05); --surface-active:rgba(255,255,255,0.10); --brand-1: #8B9BFF; /* was #818CF8 */ --brand-2: #B8C3FF; /* was #A5B4FC */ --brand-dim: rgba(139,155,255,0.14); --brand-dark: #3A5EFF; --ok: #3ED77F; --ok-dim: rgba(62,215,127,0.14); --danger: #FF7A7A; --danger-dim: rgba(255,122,122,0.14); --warning: #FFB84D; --warning-dim: rgba(255,184,77,0.13); --info: var(--brand-1); --info-dim: var(--brand-dim); --ok-dot:#3ED77F; --warning-dot:#FFB84D; --danger-dot:#FF7A7A; --info-dot:#8B9BFF; --focus-ring: rgba(139,155,255,0.25); --focus-border: rgba(139,155,255,0.50); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow-card: 0 1px 3px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.30); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 12px 36px rgba(0,0,0,0.55); --shadow-focus: 0 0 0 3px rgba(139,155,255,0.25); --scrollbar-thumb: rgba(255,255,255,0.10); --scrollbar-thumb-hover: rgba(255,255,255,0.18); --logo-filter: brightness(0) invert(1); /* @kind other */ --accent-loud:var(--brand-1); --accent-text:var(--cobalt-300); --accent-dim:var(--brand-dim); color-scheme:dark; } /* ── Theme: Ocean ─────────────────────── */ [data-theme="ocean"]{ --bg-page: #060E17; --bg-sidebar: #081220; --bg-card: #0E1C2B; --bg-card-2: #1D3A52; --bg-card-alt: #0A1521; --bg-input: #122536; --bg-ink: #F2F6FA; --ink-strong: #F2F6FA; --ink-muted: #A8B8C7; --ink-faint: #8496A6; --ink-on-brand: #FFFFFF; --stroke: rgba(120,175,255,0.12); --stroke-card: rgba(120,175,255,0.09); --stroke-strong: rgba(120,175,255,0.20); --surface-0: #0E1C2B; --surface-1: #122536; --surface-hover: rgba(139,155,255,0.08); --surface-active:rgba(139,155,255,0.14); --brand-1: #8B9BFF; --brand-2: #B8C3FF; --brand-dim: rgba(139,155,255,0.14); --brand-dark: #3A5EFF; --ok: #3ED77F; --ok-dim: rgba(62,215,127,0.14); --danger: #FF7A7A; --danger-dim: rgba(255,122,122,0.14); --warning: #FFB84D; --warning-dim: rgba(255,184,77,0.13); --info: var(--brand-1); --info-dim: var(--brand-dim); --ok-dot:#3ED77F; --warning-dot:#FFB84D; --danger-dot:#FF7A7A; --info-dot:#8B9BFF; --focus-ring: rgba(139,155,255,0.24); --focus-border: rgba(139,155,255,0.45); --shadow-sm: 0 1px 3px rgba(2,8,16,0.40); --shadow-card: 0 1px 3px rgba(2,8,16,0.45), 0 4px 12px rgba(2,8,16,0.32); --shadow-md: 0 4px 16px rgba(2,8,16,0.48); --shadow-lg: 0 12px 36px rgba(2,8,16,0.58); --shadow-focus: 0 0 0 3px rgba(139,155,255,0.24); --scrollbar-thumb: rgba(255,255,255,0.10); --scrollbar-thumb-hover: rgba(255,255,255,0.18); --logo-filter: brightness(0) invert(1); /* @kind other */ --accent-loud:var(--brand-1); --accent-text:var(--cobalt-300); --accent-dim:var(--brand-dim); color-scheme:dark; } /* ── Theme: Ember ─────────────────────── */ [data-theme="ember"]{ --bg-page: #120907; --bg-sidebar: #180D09; --bg-card: #26170F; --bg-card-2: #3D2617; --bg-card-alt: #1B0F0A; --bg-input: #332017; --bg-ink: #F7F1EC; --ink-strong: #F7F1EC; --ink-muted: #B9A695; --ink-faint: #93816F; --ink-on-brand: #FFFFFF; --stroke: rgba(255,180,100,0.12); --stroke-card: rgba(255,180,100,0.09); --stroke-strong: rgba(255,180,100,0.20); --surface-0: #26170F; --surface-1: #332017; --surface-hover: rgba(255,180,100,0.07); --surface-active:rgba(255,180,100,0.13); --brand-1: #FF8A4D; --brand-2: #FFB38A; --brand-dim: rgba(255,138,77,0.14); --brand-dark: #FF4D00; --ok: #4ADE80; --ok-dim: rgba(74,222,128,0.14); --danger: #FF7A7A; --danger-dim: rgba(255,122,122,0.14); --warning: #FFC94D; --warning-dim: rgba(255,201,77,0.14); --info: #8B9BFF; --info-dim: rgba(139,155,255,0.14); --ok-dot:#4ADE80; --warning-dot:#FFC94D; --danger-dot:#FF7A7A; --info-dot:#8B9BFF; --focus-ring: rgba(255,138,77,0.24); --focus-border: rgba(255,138,77,0.45); --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-card: 0 1px 3px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.32); --shadow-md: 0 4px 16px rgba(0,0,0,0.48); --shadow-lg: 0 12px 36px rgba(0,0,0,0.58); --shadow-focus: 0 0 0 3px rgba(255,138,77,0.24); --scrollbar-thumb: rgba(255,255,255,0.10); --scrollbar-thumb-hover: rgba(255,255,255,0.18); --logo-filter: brightness(0) invert(1); /* @kind other */ --accent-loud:var(--brand-1); --accent-text:#FFB38A; --accent-dim:var(--brand-dim); color-scheme:dark; } /* Monochrome fallback — printed POs, packing slips, faxes. */ @media print{ :root{ --bg-page:#FFF;--bg-card:#FFF;--bg-card-alt:#FFF;--bg-card-2:#FFF;--bg-input:#FFF; --bg-sidebar:#FFF;--bg-ink:#141413;--surface-0:#FFF;--surface-1:#FFF; --ink-strong:#000;--ink-muted:#42423C;--ink-faint:#5A5A53;--ink-on-brand:#FFF; --stroke:#CFCFC9;--stroke-card:#92928A;--stroke-strong:#5A5A53; --brand-1:#000;--brand-2:#000;--brand-dim:#FFF;--brand-dark:#000; --ok:#000;--warning:#000;--danger:#000;--info:#000; --ok-dim:#FFF;--warning-dim:#FFF;--danger-dim:#FFF;--info-dim:#FFF; --ok-dot:#000;--warning-dot:#000;--danger-dot:#000;--info-dot:#000; --shadow-sm:none;--shadow-card:none;--shadow-md:none;--shadow-lg:none; --accent-loud:#141413;--accent-text:#000;--accent-dim:#FFF; } }