/* ========================================================================== tokens.css — the ONLY place design values are defined. See UI_SPEC.md §2.2 (palette), §3.1 (theme engine), §4.1 (no literal colors). Structure is mandatory and must not be shortened: 1. full light palette on bare :root 2. dark palette under the OS media query, guarded so an explicit light choice still wins 3. dark palette again under :root[data-theme="dark"] so the manual toggle wins in both directions A color must NEVER be defined only inside a media or [data-theme] block — that is what produced the 419 hand-written overrides this replaces. ========================================================================== */ :root { /* ---- Brand ------------------------------------------------------------ --accent-base is the single white-label knob. The shell overrides it inline from app_settings('ui_accent'). Everything else is derived, so rebranding an install is a one-value change (UI_SPEC.md §2.2). Never reference --accent-base directly in a component; use --accent. */ --accent-base: #2B66DA; /* ---- Surfaces --------------------------------------------------------- */ --bg: #F7F8FA; --surface: #FFFFFF; --surface-2: #F1F3F7; /* ---- Text ------------------------------------------------------------- */ --text: #10151F; --text-2: #5B6577; --text-3: #646D7A; /* ---- Lines ------------------------------------------------------------ */ --border: #E3E7EE; --border-strong: #CCD3DE; /* ---- Accent ----------------------------------------------------------- */ --accent: var(--accent-base); --accent-hover: color-mix(in srgb, var(--accent-base) 86%, #000); --accent-soft: color-mix(in srgb, var(--accent-base) 10%, #FFF); --on-accent: #FFFFFF; /* ---- Semantic --------------------------------------------------------- Each of these is used as TEXT on a badge tinted with its own -soft, which is darker than white — so they are solved against white, --bg and their own -soft, not against white alone (UI_SPEC.md §4.3). */ --success: #0B7E57; --success-soft: #E6F6F0; --danger: #D52222; --danger-soft: #FDECEC; --warning: #9A5F02; --warning-soft: #FDF4E3; --info: var(--accent); --info-soft: var(--accent-soft); /* ---- Navigation surface ----------------------------------------------- The nav rail is its own surface, not a lighter card. In the light theme it is a deep neutral so the chrome reads as chrome and the content canvas is unmistakably the workspace; in dark it steps up from --bg instead, because a dark slab on a dark page is just a bigger dark page. Derived from --accent-base so a rebrand carries through the navigation too, rather than leaving a stock navy behind. */ --nav-bg: color-mix(in srgb, var(--accent-base) 16%, #0C1220); --nav-bg-2: color-mix(in srgb, var(--accent-base) 22%, #131A2B); --nav-text: #E6EAF3; --nav-text-2: #9AA6BF; --nav-border: color-mix(in srgb, #FFFFFF 9%, transparent); --nav-hover-bg: color-mix(in srgb, #FFFFFF 8%, transparent); --nav-active-bg: var(--accent-base); --nav-active-text: #FFFFFF; --nav-section: #8B98B2; --nav-on-fill: #FFFFFF; /* text/icon sitting on a nav or accent fill */ --nav-veil: color-mix(in srgb, #FFFFFF 14%, transparent); --nav-veil-strong: color-mix(in srgb, #FFFFFF 24%, transparent); --nav-scrim: color-mix(in srgb, #0C1220 55%, transparent); /* ---- Focus ------------------------------------------------------------ */ --focus-ring: var(--accent); /* ---- Scrim ------------------------------------------------------------ An overlay sitting on a user's photo, not on a themed surface. A photo does not get lighter in dark mode, so these two are deliberately the same in both themes — the one place that is correct. */ --scrim: rgba(0, 0, 0, .68); --on-scrim: #FFFFFF; /* ---- Elevation (UI_SPEC.md §2.4 — two shadows only) -------------------- */ --shadow-xs: 0 1px 2px rgba(16, 21, 31, .05); --shadow-sm: 0 1px 2px rgba(16, 21, 31, .06), 0 1px 3px rgba(16, 21, 31, .04); --shadow-md: 0 4px 12px rgba(16, 21, 31, .10), 0 2px 4px rgba(16, 21, 31, .06); --shadow-lg: 0 24px 48px -12px rgba(16, 21, 31, .25), 0 8px 16px -8px rgba(16, 21, 31, .12); /* ---- Typography ------------------------------------------------------- */ --font-body: 'Assistant', system-ui, sans-serif; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.875rem; /* 14 — dense admin default */ --fs-md: 1rem; /* 16 — /field/ default */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: 1.875rem; /* 30 */ --lh-body: 1.5; --lh-heading: 1.25; --fw-normal: 400; --fw-semi: 600; /* headings — lighter reads more modern */ --fw-bold: 700; /* ---- Spacing (4px base, UI_SPEC.md §2.1) ------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* ---- Radii ------------------------------------------------------------ */ --r-sm: 6px; /* controls */ --r-md: 10px; /* cards */ --r-lg: 14px; /* dialogs */ --r-full: 999px; /* pills */ /* ---- Motion ----------------------------------------------------------- */ --dur-fast: 140ms; --dur-slow: 200ms; --ease: cubic-bezier(.2, .6, .3, 1); /* ---- Layout ----------------------------------------------------------- */ --sidebar-w: 264px; --sidebar-rail-w: 64px; --topbar-h: 60px; color-scheme: light; } /* -------------------------------------------------------------------------- Dark — OS preference. Guarded so an explicit light choice still wins. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F1420; --surface: #171D2B; --surface-2: #212A3B; --text: #E9EDF4; --text-2: #9BA6B8; --text-3: #8592A6; --border: #2B3444; --border-strong: #3A4557; /* Lightened: a mid-blue that passes on white fails on a dark surface. Deriving it here is what makes per-component dark rules unnecessary. */ --accent: color-mix(in srgb, var(--accent-base) 62%, #FFF); --accent-hover: color-mix(in srgb, var(--accent-base) 48%, #FFF); --accent-soft: color-mix(in srgb, var(--accent-base) 22%, #0F1420); --on-accent: #0B1220; --success: #34D399; --success-soft: #10261F; --danger: #F87171; --danger-soft: #2A1618; --warning: #FBBF24; --warning-soft: #2A2110; --info: var(--accent); --info-soft: var(--accent-soft); /* Nav rail — in dark it steps UP from the canvas rather than down. */ --nav-bg: #141B29; --nav-bg-2: #1B2333; --nav-text: #E9EDF4; --nav-text-2: #9BA6B8; --nav-border: #2B3444; --nav-hover-bg: color-mix(in srgb, #FFFFFF 6%, transparent); --nav-active-bg: color-mix(in srgb, var(--accent-base) 40%, #1B2333); --nav-active-text: #FFFFFF; --nav-section: #8894AC; --nav-on-fill: #FFFFFF; --nav-veil: color-mix(in srgb, #FFFFFF 10%, transparent); --nav-veil-strong: color-mix(in srgb, #FFFFFF 20%, transparent); --nav-scrim: color-mix(in srgb, #000000 62%, transparent); /* Dark leans on surface steps rather than shadow (UI_SPEC.md §2.4). */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 6px 16px rgba(0, 0, 0, .50); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .65); color-scheme: dark; } } /* -------------------------------------------------------------------------- Dark — explicit choice. Same values; wins over the OS in both directions. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #0F1420; --surface: #171D2B; --surface-2: #212A3B; --text: #E9EDF4; --text-2: #9BA6B8; --text-3: #8592A6; --border: #2B3444; --border-strong: #3A4557; --accent: color-mix(in srgb, var(--accent-base) 62%, #FFF); --accent-hover: color-mix(in srgb, var(--accent-base) 48%, #FFF); --accent-soft: color-mix(in srgb, var(--accent-base) 22%, #0F1420); --on-accent: #0B1220; --success: #34D399; --success-soft: #10261F; --danger: #F87171; --danger-soft: #2A1618; --warning: #FBBF24; --warning-soft: #2A2110; --info: var(--accent); --info-soft: var(--accent-soft); /* Nav rail — in dark it steps UP from the canvas rather than down. */ --nav-bg: #141B29; --nav-bg-2: #1B2333; --nav-text: #E9EDF4; --nav-text-2: #9BA6B8; --nav-border: #2B3444; --nav-hover-bg: color-mix(in srgb, #FFFFFF 6%, transparent); --nav-active-bg: color-mix(in srgb, var(--accent-base) 40%, #1B2333); --nav-active-text: #FFFFFF; --nav-section: #8894AC; --nav-on-fill: #FFFFFF; --nav-veil: color-mix(in srgb, #FFFFFF 10%, transparent); --nav-veil-strong: color-mix(in srgb, #FFFFFF 20%, transparent); --nav-scrim: color-mix(in srgb, #000000 62%, transparent); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 6px 16px rgba(0, 0, 0, .50); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .65); color-scheme: dark; } /* -------------------------------------------------------------------------- Motion preference — global, so no component has to remember it. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-slow: 0ms; } }