/* ============================================================ VASEO brand tokens (Bureau palette) ------------------------------------------------------------ THE file to edit for any colour / font / spacing change. Every visual property in css/style.css and the HTML pages uses var(--*) only. Zero hardcoded hex / font / spacing outside this file. Activated by PRD 07 against the Claude Design exploration's token set (docs/design-explorations/claude-design-2026-05-14/) and the brand visual-identity-brief.md. Spec: docs/tokens.md. Theming surfaces (all optional; system works with none set): data-theme="light" | "dark" default light. Dark is manual opt-in only; no prefers-color-scheme auto-switch (decisions-log 2026-05-15). data-accent="indigo" | "rust" default forest. Forest values live in :root; indigo and rust swap via attribute. Cascade order on every page : 1. tokens.css brand values 2. style.css layout + components (token-driven) 3. fixes.css page-scoped patches (loads last) ============================================================ */ :root, [data-theme="light"] { /* ---- Colour: surface ramp ---- */ --color-bg: oklch(96.5% 0.008 95); /* warm bone */ --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-surface-sunk: oklch(93% 0.008 95); --color-surface-3: oklch(89% 0.008 95); /* ---- Colour: ink ramp ---- */ --color-text: oklch(15% 0.01 80); /* ~16:1 on --color-bg */ --color-text-soft: oklch(28% 0.012 80); /* ~10:1 on --color-bg */ --color-text-muted: oklch(48% 0.012 80); /* ~4.7:1 on --color-bg (border of AA) */ /* ---- Colour: lines ---- */ --color-border: oklch(88% 0.008 95); --color-border-strong: oklch(78% 0.008 95); /* ---- Colour: primary (FOREST, default brand accent) ---- */ --color-primary: oklch(40% 0.12 155); /* forest, ~5.9:1 on --color-bg */ --color-primary-rgb: 45, 99, 72; --color-primary-soft: oklch(94% 0.04 155); --color-primary-strong: oklch(30% 0.10 155); --color-primary-on: oklch(98% 0.005 95); /* foreground on primary fill */ /* ---- Colour: brand mark (logo wordmark only - NOT for UI) ---- */ --color-brand-mark: oklch(30% 0.06 155); /* ~#1f4733 - locked logo V colour */ /* ---- Colour: signal (chartreuse, anti-cliche, sparing use) ---- */ --color-signal: oklch(82% 0.18 105); --color-signal-soft: oklch(94% 0.07 105); --color-signal-ink: oklch(28% 0.06 105); /* ---- Colour: accent (rust, warm emphasis) ---- */ --color-accent: oklch(55% 0.16 35); --color-accent-soft: oklch(94% 0.06 35); --color-accent-strong: oklch(40% 0.13 35); /* ---- Colour: semantic ---- */ --color-success: oklch(48% 0.12 145); --color-success-soft: oklch(94% 0.04 145); --color-warning: oklch(58% 0.16 65); --color-warning-soft: oklch(94% 0.06 65); --color-danger: oklch(52% 0.20 25); --color-danger-soft: oklch(94% 0.06 25); /* ---- Colour: inverse (dark blocks on light pages) ---- */ --color-inverse-bg: oklch(16% 0.012 80); --color-inverse-text: oklch(95% 0.008 95); --color-inverse-mute: oklch(62% 0.012 80); --color-inverse-border: oklch(26% 0.012 80); /* ---- Type: families ---- */ --font-heading: 'Instrument Serif', 'Times New Roman', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Type: scale ---- */ --font-size-xs: 0.75rem; /* 12 */ --font-size-sm: 0.875rem; /* 14 */ --font-size-base: 1rem; /* 16 */ --font-size-md: 1.0625rem; /* 17 */ --font-size-lg: 1.1875rem; /* 19 */ --font-size-xl: 1.5rem; /* 24 */ --font-size-2xl: 1.875rem; /* 30 */ --font-size-3xl: clamp(2rem, 3.4vw, 2.625rem); /* 32 -> 42 */ --font-size-4xl: clamp(2.5rem, 4.8vw, 3.5rem); /* 40 -> 56 */ --font-size-hero: clamp(2.75rem, 7vw, 5.5rem); /* 44 -> 88 */ --line-height-tight: 1.04; --line-height-snug: 1.18; --line-height-base: 1.55; --line-height-loose: 1.7; --letter-spacing-tight: -0.025em; --letter-spacing-snug: -0.015em; --letter-spacing-base: 0em; --letter-spacing-wide: 0.04em; --letter-spacing-mono: 0.12em; /* ---- Spacing (4px grid, 10 steps) ---- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* ---- Radii ---- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; /* ---- Shadow (warm, restrained) ---- */ --shadow-sm: 0 1px 2px rgba(18, 16, 12, 0.04); --shadow-md: 0 6px 18px -8px rgba(18, 16, 12, 0.12); --shadow-lg: 0 20px 50px -20px rgba(18, 16, 12, 0.18); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); /* ---- Motion ---- */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---- Layout ---- */ --content-max-width: 1180px; --content-narrow: 720px; --content-pad-x: var(--space-6); --content-pad-x-sm: var(--space-5); /* ---- Breakpoints (documented; consumed by @media literals in style.css) ---- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1180px; /* ---- Z-index layers ---- */ --z-base: 0; --z-raised: 10; --z-chrome: 100; --z-overlay: 1000; } /* ============================================================ Accent alternates (light theme) :root carries FOREST. Indigo and rust are opt-in swaps. ============================================================ */ [data-accent="indigo"] { --color-primary: oklch(38% 0.14 270); /* deep indigo, ~4.8:1 on --color-bg */ --color-primary-rgb: 45, 60, 119; --color-primary-soft: oklch(94% 0.04 270); --color-primary-strong: oklch(25% 0.10 270); } [data-accent="rust"] { --color-primary: oklch(55% 0.16 35); --color-primary-rgb: 181, 100, 60; --color-primary-soft: oklch(94% 0.06 35); --color-primary-strong: oklch(40% 0.13 35); } /* ============================================================ Dark theme (manual opt-in only - no prefers-color-scheme switch) :root for dark also carries FOREST as the default primary. ============================================================ */ [data-theme="dark"] { --color-bg: oklch(14% 0.01 80); --color-surface: oklch(17% 0.01 80); --color-surface-raised: oklch(20% 0.01 80); --color-surface-sunk: oklch(12% 0.01 80); --color-surface-3: oklch(24% 0.01 80); --color-text: oklch(95% 0.008 95); --color-text-soft: oklch(82% 0.01 95); --color-text-muted: oklch(60% 0.012 80); --color-border: oklch(25% 0.01 80); --color-border-strong: oklch(35% 0.01 80); /* Primary: forest dark default */ --color-primary: oklch(72% 0.12 155); --color-primary-soft: oklch(28% 0.07 155); --color-primary-strong: oklch(82% 0.12 155); --color-primary-on: oklch(15% 0.05 155); --color-signal: oklch(85% 0.18 105); --color-signal-soft: oklch(28% 0.08 105); --color-signal-ink: oklch(90% 0.18 105); --color-accent: oklch(72% 0.16 35); --color-accent-soft: oklch(28% 0.08 35); --color-success: oklch(70% 0.12 145); --color-success-soft: oklch(28% 0.05 145); --color-warning: oklch(76% 0.16 65); --color-warning-soft: oklch(28% 0.07 65); --color-danger: oklch(70% 0.20 25); --color-danger-soft: oklch(28% 0.08 25); --color-inverse-bg: oklch(93% 0.008 95); --color-inverse-text: oklch(16% 0.012 80); --color-inverse-mute: oklch(48% 0.012 80); --color-inverse-border: oklch(82% 0.01 95); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px -8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent); } [data-theme="dark"][data-accent="indigo"] { --color-primary: oklch(72% 0.14 270); --color-primary-soft: oklch(28% 0.07 270); --color-primary-strong: oklch(82% 0.14 270); } [data-theme="dark"][data-accent="rust"] { --color-primary: oklch(72% 0.16 35); --color-primary-soft: oklch(28% 0.08 35); --color-primary-strong: oklch(82% 0.16 35); } /* ============================================================ Reduced motion - global override on durations ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }