/* ========================================================================= Design tokens — single source of truth. Change a value here and it propagates everywhere. Colour rationale: the palette never relies on hue alone to carry meaning (state is also shown via weight, icon, position or a text label), and the accent is blue — the safest choice across the common colour-vision deficiencies. Contrast ratios below are measured against the token each colour is normally paired with, using the WCAG 2.1 formula. ========================================================================= */ :root { /* ---- Colour: surfaces ---- */ --c-bg: #fafaf7; /* app background — warm off-white */ --c-surface: #ffffff; /* raised surfaces: sidebar, cards */ --c-surface-2: #f2f2ee; /* subtle inset / hover fill on light */ /* ---- Colour: text (measured on --c-bg) ---- */ --c-ink: #14151a; /* primary text ~17:1 (AAA) */ --c-ink-soft: #565a63; /* secondary text ~6.6:1 (AA, near AAA) */ --c-ink-faint: #767a83; /* labels / meta ~4.1:1 (AA large / UI) */ /* ---- Colour: lines ---- */ --c-border: #e7e7e1; /* hairline dividers */ --c-border-strong: #cfcfc8; /* ---- Colour: accent (interactive) ---- */ --c-accent: #2f6bff; /* fills, borders, focus glows ~4.5:1 on white */ --c-accent-ink: #1b4dd1; /* accent TEXT + solid buttons ~6.9:1 on white (AAA large) */ --c-accent-wash: #edf2ff; /* tinted accent background (active nav, chips) */ --c-on-accent: #ffffff; /* text on --c-accent-ink ~6.9:1 */ /* ---- Focus ---- */ --c-focus: #1b4dd1; /* ---- Spacing scale (4px base) ---- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ /* ---- Radius ---- */ --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 1rem; --r-full: 999px; /* ---- Typography ---- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-sans); /* swap in an expressive display face later */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.75rem; --fs-5xl: 3.5rem; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-label: 0.08em; /* letter-spacing for eyebrow/label caps */ /* ---- Elevation ---- */ --shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.06); --shadow-md: 0 8px 24px -12px rgba(20, 21, 26, 0.18); /* ---- Motion ---- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 200ms; /* ---- Layout ---- */ --sidebar-w-expanded: 264px; --sidebar-w-collapsed: 76px; --content-max: 100%; --z-sidebar: 20; } /* ========================================================================= Dark theme — applied when . Same token NAMES, new values, so every component adapts automatically. Rationale (WCAG 2.1, measured against the token each colour is normally paired with): - Surfaces step UP in lightness (bg < surface < surface-2) so elevation reads without shadows (shadows barely register on a dark ground). - Text on --c-surface: ink ~13:1 (AAA), ink-soft ~7:1 (AAA), ink-faint ~4.4:1 (AA for UI/large text). - Accent stays BLUE — the safest hue across the common colour-vision deficiencies. The same --c-accent-ink is used BOTH as link/label text AND as the solid-button background, so dark flips --c-on-accent to near-black: #7aa2ff reads ~6.6:1 as text on dark surfaces, and #0b0e12 reads ~8:1 on the #7aa2ff button — white-on-blue (which would fail) never happens. - color-scheme:dark makes native controls (date/number inputs, scrollbars) render dark to match. ========================================================================= */ html[data-theme="dark"] { color-scheme: dark; --c-bg: #0f1216; --c-surface: #171b21; --c-surface-2: #212630; --c-ink: #eef0f3; --c-ink-soft: #b2b8c2; --c-ink-faint: #868d99; --c-border: #2a303a; --c-border-strong: #3b434f; --c-accent: #4d82ff; --c-accent-ink: #7aa2ff; --c-accent-wash: #1b2740; --c-on-accent: #0b0e12; --c-focus: #7aa2ff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 10px 28px -12px rgba(0, 0, 0, 0.7); }