/* ════════════════════════════════════════════════════════════════════
   save2retire — Phase 17a Design Tokens
   ════════════════════════════════════════════════════════════════════
   
   Source of truth for the Direction 4 "Considered Surface" design
   language. OKLCH-based color, Geist + Instrument Serif type, motion.
   
   Loaded from app.html via <link rel="stylesheet" href="/tokens.css?v=N">
   so tokens are globally available before the React bundle mounts.
   
   Conventions:
   - Every Phase 17a primitive uses var(--token) in inline styles
   - Brand swap: set .brand-{name} on app root (overrides --accent-*)
   - Theme swap: set .theme-light or .theme-dark on app root
   
   Default = light theme (Phase 17a code starts here per handoff §13).
   Dark mode is brand statement; light is the daily-use surface.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;450;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* ─── Default / Light Theme ─── */

:root {
    /* Surface palette — elevation through warmth, not darkening */
    --bg-base: oklch(98.5% 0.004 80);
    --bg-canvas: oklch(99.7% 0.002 80);
    --bg-elev-1: oklch(97% 0.005 80);
    --bg-elev-2: oklch(95% 0.006 80);
    --bg-elev-3: oklch(93% 0.007 80);
    --bg-rail: oklch(96.8% 0.005 80);
    
    /* Text — 4 weights, perceptually uniform */
    --text-primary: oklch(18% 0.01 60);
    --text-secondary: oklch(40% 0.008 60);
    --text-tertiary: oklch(58% 0.008 60);
    --text-quaternary: oklch(70% 0.006 60);
    
    /* Borders — alpha composition for layering */
    --border-subtle: oklch(88% 0.008 60 / 0.6);
    --border-default: oklch(80% 0.01 60 / 0.7);
    --border-strong: oklch(72% 0.012 60 / 0.7);
    
    /* Accent — Save2Retire amber. Brand statement color.
       --accent-h is the hue, swap-able for white-label.
       Light mode uses HIGHER chroma + LOWER luminance than dark
       so accent retains presence against white backgrounds. */
    --accent-h: 75;
    --accent-c: 0.18;
    --accent-l: 56%;
    --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
    --accent-bright: oklch(48% 0.20 var(--accent-h));
    --accent-dim: oklch(72% 0.14 var(--accent-h));
    --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.12);
    --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.07);
    --accent-on: oklch(99% 0.002 80);  /* Text color ON accent surfaces */

    /* Accent secondary — second action colour for the two-CTA pattern
       observed across real-world brands (AustralianSuper orange JOIN
       + purple "I've just started"; save2retire's own Open / Delete
       pairs; etc.).
       Phase 17h CC.8 m7i (2026-05-17): added as part of the branding
       bridge rework. Maps from org.secondary_color in production via
       branding-bridge.js — was previously a gradient stop with no
       independent rendering role.
       Default for save2retire brand: deep indigo (h=255), complementary
       to the amber primary. Each brand class below redefines this
       chain with its own hue. */
    --accent-secondary-h: 255;
    --accent-secondary-c: 0.16;
    --accent-secondary-l: 48%;
    --accent-secondary: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h));
    --accent-secondary-bright: oklch(42% 0.18 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(64% 0.12 var(--accent-secondary-h));
    --accent-secondary-glow: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.12);
    --accent-secondary-soft: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.07);
    --accent-secondary-on: oklch(99% 0.002 80);
    
    /* Semantic — hue-fixed across all brands. Universal meaning. */
    --critical: oklch(54% 0.20 25);
    --critical-soft: oklch(54% 0.20 25 / 0.08);
    --warning: oklch(58% 0.16 60);
    --warning-soft: oklch(58% 0.16 60 / 0.08);
    --insight: oklch(48% 0.16 220);
    --insight-soft: oklch(48% 0.16 220 / 0.08);
    --positive: oklch(48% 0.15 155);
    --positive-soft: oklch(48% 0.15 155 / 0.08);
    
    /* Typography */
    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
    
    /* Spacing scale — 4px base */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    
    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    
    /* Motion — spring + ease-out-expo */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 240ms;
    --duration-slow: 420ms;
    
    /* Shadows — light mode, soft and warm */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05), 0 0 0 1px var(--border-subtle);
    --shadow-md: 0 4px 14px oklch(0% 0 0 / 0.06), 0 1px 3px oklch(0% 0 0 / 0.03), 0 0 0 1px var(--border-subtle);
    --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.10), 0 4px 8px oklch(0% 0 0 / 0.05), 0 0 0 1px var(--border-default);
}

/* ─── Dark Theme — designed independently, NOT derived ─── */

.theme-dark {
    --bg-base: oklch(14% 0.008 60);
    --bg-canvas: oklch(16% 0.008 60);
    --bg-elev-1: oklch(19% 0.01 60);
    --bg-elev-2: oklch(22% 0.012 60);
    --bg-elev-3: oklch(25% 0.014 60);
    --bg-rail: oklch(15.5% 0.01 60);
    
    --text-primary: oklch(96% 0.005 80);
    --text-secondary: oklch(72% 0.008 70);
    --text-tertiary: oklch(52% 0.01 65);
    --text-quaternary: oklch(40% 0.008 60);
    
    --border-subtle: oklch(28% 0.01 60 / 0.6);
    --border-default: oklch(33% 0.012 60 / 0.7);
    --border-strong: oklch(40% 0.014 60 / 0.8);
    
    /* Dark mode: HIGHER luminance + slightly lower chroma — accent glows */
    --accent-c: 0.16;
    --accent-l: 78%;
    --accent-bright: oklch(86% 0.18 var(--accent-h));
    --accent-dim: oklch(60% 0.14 var(--accent-h));
    --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.18);
    --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.08);
    --accent-on: oklch(14% 0.008 60);

    /* Phase 17h CC.8 m7i — accent-secondary dark mode overrides */
    --accent-secondary-c: 0.14;
    --accent-secondary-l: 74%;
    --accent-secondary-bright: oklch(82% 0.16 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(56% 0.12 var(--accent-secondary-h));
    --accent-secondary-glow: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.18);
    --accent-secondary-soft: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.08);
    --accent-secondary-on: oklch(14% 0.008 60);
    
    --critical: oklch(70% 0.16 25);
    --critical-soft: oklch(70% 0.16 25 / 0.12);
    --warning: oklch(78% 0.14 65);
    --warning-soft: oklch(78% 0.14 65 / 0.12);
    --insight: oklch(72% 0.10 220);
    --insight-soft: oklch(72% 0.10 220 / 0.12);
    --positive: oklch(72% 0.13 155);
    --positive-soft: oklch(72% 0.13 155 / 0.12);
    
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3), 0 0 0 1px var(--border-subtle);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.35), 0 1px 3px oklch(0% 0 0 / 0.2), 0 0 0 1px var(--border-subtle);
    --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.4), 0 4px 8px oklch(0% 0 0 / 0.25), 0 0 0 1px var(--border-default);
}

/* ─── White-label brand presets (Tier 1) ─── */
/* Each brand redefines the full accent chain — required because CSS
   variables with var() references resolve at definition time, not
   computation time. Changing only --accent-h doesn't update --accent
   which was already computed. So each brand class redefines all
   accent-* vars to force recomputation with the new hue.
   (See handoff §13 Phase 17a — CSS gotcha documented.) */

.brand-default {
    --accent-h: 75;
    --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
    --accent-bright: oklch(48% 0.20 var(--accent-h));
    --accent-dim: oklch(72% 0.14 var(--accent-h));
    --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.12);
    --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.07);
    /* Phase 17h CC.8 m7i — secondary accent hue 255 (deep indigo) */
    --accent-secondary-h: 255;
    --accent-secondary: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h));
    --accent-secondary-bright: oklch(42% 0.18 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(64% 0.12 var(--accent-secondary-h));
    --accent-secondary-glow: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.12);
    --accent-secondary-soft: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.07);
}

.brand-meridian {
    --accent-h: 175;
    --accent-c: 0.13;
    --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
    --accent-bright: oklch(44% 0.15 var(--accent-h));
    --accent-dim: oklch(68% 0.11 var(--accent-h));
    --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.12);
    --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.07);
    /* Phase 17h CC.8 m7i — secondary at hue 355 (warm coral, complementary to teal) */
    --accent-secondary-h: 355;
    --accent-secondary-c: 0.14;
    --accent-secondary: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h));
    --accent-secondary-bright: oklch(42% 0.16 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(64% 0.10 var(--accent-secondary-h));
    --accent-secondary-glow: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.12);
    --accent-secondary-soft: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.07);
}

.brand-northwood {
    --accent-h: 28;
    --accent-c: 0.17;
    --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
    --accent-bright: oklch(46% 0.21 var(--accent-h));
    --accent-dim: oklch(70% 0.15 var(--accent-h));
    --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.12);
    --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.07);
    /* Phase 17h CC.8 m7i — secondary at hue 200 (cool blue, complement to terracotta) */
    --accent-secondary-h: 200;
    --accent-secondary-c: 0.15;
    --accent-secondary: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h));
    --accent-secondary-bright: oklch(42% 0.17 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(64% 0.11 var(--accent-secondary-h));
    --accent-secondary-glow: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.12);
    --accent-secondary-soft: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.07);
}

.brand-keystone {
    --accent-h: 245;
    --accent-c: 0.16;
    --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
    --accent-bright: oklch(40% 0.18 var(--accent-h));
    --accent-dim: oklch(64% 0.13 var(--accent-h));
    --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.12);
    --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.07);
    /* Phase 17h CC.8 m7i — secondary at hue 65 (warm yellow-gold, complement to blue) */
    --accent-secondary-h: 65;
    --accent-secondary-c: 0.15;
    --accent-secondary: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h));
    --accent-secondary-bright: oklch(42% 0.17 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(64% 0.11 var(--accent-secondary-h));
    --accent-secondary-glow: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.12);
    --accent-secondary-soft: oklch(var(--accent-secondary-l) var(--accent-secondary-c) var(--accent-secondary-h) / 0.07);
}

/* Brand overrides for dark theme — different bright/dim luminance */
.theme-dark.brand-default {
    --accent-bright: oklch(86% 0.18 var(--accent-h));
    --accent-dim: oklch(60% 0.14 var(--accent-h));
    --accent-secondary-bright: oklch(80% 0.16 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(54% 0.12 var(--accent-secondary-h));
}
.theme-dark.brand-meridian {
    --accent-bright: oklch(82% 0.15 var(--accent-h));
    --accent-dim: oklch(56% 0.11 var(--accent-h));
    --accent-secondary-bright: oklch(80% 0.14 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(54% 0.10 var(--accent-secondary-h));
}
.theme-dark.brand-northwood {
    --accent-bright: oklch(80% 0.19 var(--accent-h));
    --accent-dim: oklch(58% 0.15 var(--accent-h));
    --accent-secondary-bright: oklch(78% 0.15 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(54% 0.11 var(--accent-secondary-h));
}
.theme-dark.brand-keystone {
    --accent-bright: oklch(72% 0.17 var(--accent-h));
    --accent-dim: oklch(50% 0.13 var(--accent-h));
    --accent-secondary-bright: oklch(76% 0.15 var(--accent-secondary-h));
    --accent-secondary-dim: oklch(52% 0.11 var(--accent-secondary-h));
}

/* ─── Motion accessibility ─── */
/* Respects user's system preference. ALL Phase 17a motion sets
   transition-duration / animation-duration through tokens, so killing
   durations here cascades to every primitive. */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0.01ms;
        --duration-base: 0.01ms;
        --duration-slow: 0.01ms;
    }
}

/* ─── Utility classes for components that need them ─── */

.s2r-tabular {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

.s2r-font-features {
    font-feature-settings: 'cv01', 'cv02', 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}