/* Template 1 · Back-office shell · design tokens
   Source of truth: /workspace/projects/design/GUIDE.md §1.2, §1.3, §1.3b, §2.2
   and cashflow-design-upgrade.md §1.1 (type table), §1.5 (sidebar), §2 (contrast).
   Contrast ratios verified with /workspace/projects/design/tools/contrast.py. */

:root {
  /* Font: Inter (SIL OFL 1.1), tabular figures for money */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale: size/line-height (GUIDE §1.2) */
  --fs-xs: 13px;      --lh-xs: 18px;      /* table headers, captions, notes */
  --fs-sm: 14px;      --lh-sm: 20px;      /* table cells, KPI labels */
  --fs-base: 15px;    --lh-base: 22px;    /* body, form controls */
  --fs-status: 18px;  --lh-status: 26px;  /* status banner sentence (600) */
  --fs-h2: 20px;      --lh-h2: 26px;      /* section heading (600, -0.015em) */
  --fs-h1: 30px;      --lh-h1: 36px;      /* page title (700, -0.02em) */
  --fs-kpi: 34px;     --lh-kpi: 40px;     /* KPI figure (700, -0.02em, tabular-nums) */
  --fs-h3: 16px;      --lh-h3: 22px;      /* card/drawer subheading (600) */
  --fs-nav: 14.5px;                       /* sidebar nav row (500; 600 active) */
  --fs-nav-group: 11px;                   /* sidebar group label, uppercase, 0.06em */
  --fs-pill: 12.5px;                      /* pill label (600) */
  --tracking-tight: -0.02em;

  /* Spacing: 4/8 scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* Layout */
  --shell-max: 1440px;     /* sidebar + workspace */
  --sidebar-w: 240px;
  --topbar-h: 60px;
  --nav-row-h: 38px;
  --row-h: 34px;           /* default table row */
  --row-h-compact: 28px;   /* compact table row */
  --btn-h: 40px;
  --pill-h: 24px;
  --avatar: 36px;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 9999px;
  --card-pad: 20px;        /* 16px under 768px */
  --stack-gap: 16px;
  --ask-w: 380px;          /* Ask drawer, desktop */

  /* Colour, light (GUIDE §1.3) */
  --c-bg: #FFFFFF;
  --c-surface: #F7F7F8;
  --c-surface-2: #EFEFF2;
  --c-text: #18181B;          /* 17.72:1 on bg */
  --c-text-muted: #5C5C66;    /* 6.61:1 on bg, 6.17:1 on surface */
  --c-border: #E4E4E7;        /* decorative only */
  --c-border-strong: #8A8A93; /* 3.42:1, controls */
  --c-brand: #1D5BD6;         /* links, focus ring; 5.97:1 */
  --c-on-brand: #FFFFFF;
  --c-cta: #18181B;
  --c-cta-fg: #FFFFFF;
  --c-positive: #17733A;  --c-positive-bg: #E8F5EC;   /* 5.27:1 on pill bg */
  --c-negative: #C42B2B;  --c-negative-bg: #FCEBEB;   /* 4.89:1 on pill bg */
  --c-warning: #8A5300;   --c-warning-bg: #FFF4E0;    /* 5.81:1 on pill bg */
  --c-chart-neutral: #3E7BE0;
  --c-chart-positive: #2E9D57;
  --c-chart-negative: #D64545;

  /* Brand: Turnkey red is ONLY for logo mark, active-nav bar, 2px top accent */
  --c-turnkey-red: #DA262E;
  --c-turnkey-navy: #1C2B3A;

  /* Motion: IBM Carbon productive (GUIDE §2.2) */
  --motion-fast: 110ms;   /* hover, press, focus, tab crossfade */
  --motion-base: 150ms;   /* avatar popover, small expand */
  --motion-slow: 240ms;   /* drawers, Ask panel, chart continuity */
  --motion-max: 400ms;    /* ceiling; user-triggered replay only */
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-enter: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
}

/* Colour, dark (GUIDE §1.3b) */
html[data-theme="dark"] {
  --c-bg: #0F1216;
  --c-surface: #171B21;
  --c-surface-2: #1F252E;
  --c-text: #F2F4F7;          /* 17.04:1 */
  --c-text-muted: #9AA4B2;    /* 7.45:1 / 6.85:1 */
  --c-border: #262C36;
  --c-border-strong: #7D8894; /* 5.20:1 */
  --c-brand: #669DF6;
  --c-on-brand: #0F1216;
  --c-cta: #F2F4F7;
  --c-cta-fg: #0F1216;
  --c-positive: #4CC38A;  --c-positive-bg: #112A1E;   /* 6.90:1 */
  --c-negative: #F87171;  --c-negative-bg: #2D1618;   /* 6.12:1 */
  --c-warning: #FBBF24;   --c-warning-bg: #2B2111;    /* 9.47:1 */
  --c-chart-neutral: #60A5FA;
}

/* Reduced motion (WCAG 2.3.3, technique C39; GUIDE §2.7) */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-max: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}