/* * Brevflet design tokens (UX-03/04). * * Every palette value is a CSS custom property so the shell, the canvas motif * (which reads these via getComputedStyle) and every later wizard step share one * source of truth. Two locked palettes: * * LIGHT — the LD palette: cream / sage / deep-green, status red + yellow. * DARK — the sibling REKOM green-black: deep ground / surface, sage lead, gold. * * The active palette is selected by [data-theme] on , server-rendered from * the brevflet_theme cookie (no flash) and flipped client-side by shell.js. */ /* ── LIGHT (LD palette) — the default :root ─────────────────────────────── */ :root, :root[data-theme="light"] { /* Brand / raw palette (locked) */ --ld-cream: #F0E8DC; --ld-sage: #92C1C2; --ld-green: #16302C; --ld-green-2: #2D5E3E; --ld-red: #8B3535; --ld-yellow: #7A6530; /* Semantic surfaces */ --bg: #F0E8DC; /* page ground (cream) */ --surface: #FBF7F0; /* raised cards/panels (lifted cream) */ --surface-2: #E6DCCB; /* sunken / subtle fills */ --border: #D6C9B4; /* hairlines on cream */ --border-strong: #B9A98C; /* Semantic ink (text) */ --ink: #16302C; /* primary text (deep green) */ --ink-2: #2D5E3E; /* secondary text */ --ink-muted: #5E6B61; /* captions / disabled-ish */ --on-accent: #16302C; /* text on sage accents */ /* Accents */ --accent: #92C1C2; /* sage — primary accent */ --accent-strong: #2D5E3E; /* deep green — strong/active accent */ --gold: #C08A2E; /* warm highlight (light-tuned) */ /* Status families */ --danger: #8B3535; --danger-bg: #F3E0DD; --warn: #7A6530; --warn-bg: #F1E9CF; --success: #2D5E3E; --success-bg: #DCEBDF; /* Focus ring colour (UX-06) — strong enough on cream */ --focus: #2D5E3E; /* Elevation */ --shadow-1: 0 1px 2px rgba(22, 48, 44, 0.08), 0 2px 8px rgba(22, 48, 44, 0.06); --shadow-2: 0 4px 12px rgba(22, 48, 44, 0.12), 0 8px 28px rgba(22, 48, 44, 0.10); color-scheme: light; } /* ── DARK (REKOM green-black) ───────────────────────────────────────────── */ :root[data-theme="dark"] { /* Brand / raw palette (locked) */ --rk-ground: #10201C; --rk-surface: #17302B; --rk-sage: #92C1C2; --rk-gold: #E3A857; /* Semantic surfaces */ --bg: #10201C; /* deep green-black ground */ --surface: #17302B; /* raised cards/panels */ --surface-2: #1E3B34; /* lifted / hover fills */ --border: #2A4A42; /* hairlines */ --border-strong: #3C645A; /* Semantic ink (text) */ --ink: #EAF1EC; /* primary text (off-white green-tint) */ --ink-2: #C2D4CB; /* secondary text */ --ink-muted: #8FA89C; /* captions / disabled-ish */ --on-accent: #10201C; /* text on sage accents */ /* Accents */ --accent: #92C1C2; /* sage — lead accent */ --accent-strong: #B4DAD8; /* brighter sage for active/hover */ --gold: #E3A857; /* warm gold highlight */ /* Status families (dark-tuned) */ --danger: #D98A8A; --danger-bg: #3A2222; --warn: #E0C66A; --warn-bg: #33301B; --success: #8FD3A4; --success-bg: #1C3B2B; /* Focus ring colour (UX-06) — bright sage on dark ground */ --focus: #92C1C2; /* Elevation (deeper on dark) */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.32); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.50), 0 10px 32px rgba(0, 0, 0, 0.42); color-scheme: dark; } /* ── Non-palette scales (shared across themes) ──────────────────────────── */ :root { /* Typography */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* --font-mono is DEPRECATED: the UI no longer uses a monospace face (all former mono usages now resolve to the sans stack). Kept as a sans alias so any stray or future var(--font-mono) reference still renders sans rather than monospace. */ --font-mono: var(--font-sans); /* Type scale (fluid where it pays off) */ --fs-2xs: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --lh-tight: 1.2; --lh-base: 1.55; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing scale (4px base) */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Radius */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; /* Layout */ --rail-width: clamp(13rem, 18vw, 16rem); --content-max: 64rem; --header-h: clamp(5rem, 4rem + 4vw, 7.5rem); /* Motion (consumed only inside prefers-reduced-motion: no-preference) */ --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Breakpoint reference (informational; media queries hard-code 768px) */ --bp-mobile: 768px; }