/* Beursie design tokens: the only place raw values live (skills/css-design-system, D31).
   Light values follow the approved screens in docs/design (R100 blue, v1). */
:root {
  --c-bg: #F2F5F4;
  --c-surface: #FFFFFF;
  --c-text: #1D2321;
  --c-text-soft: #3F4A47;
  --c-muted: #5E6966;
  --c-border: #E6ECEA;          /* row dividers, bar tracks */
  --c-border-strong: #D3DCD9;   /* secondary buttons, pills */
  --c-nav-border: #E0E7E4;
  --c-primary: #24508F; /* SA R100 note blue */
  --c-primary-deep: #1A3D6E;
  --c-primary-ink: #FFFFFF;
  --c-hero: #24508F;            /* hero card + result tiles */
  --c-hero-ink: #FFFFFF;
  --c-hero-tile: rgb(255 255 255 / .12);
  --c-accent: #F2C14E; /* clasp gold */
  --c-accent-ink: #1D2321;
  --c-in: #2E7D5B;
  --c-out: #A23C30;
  --c-out-bar: #C9675B;         /* below-zero bars on the curve */
  --c-warn: #A0763C;            /* over-budget bar */
  --c-warn-ink: #7A5524;        /* over-budget text */
  --c-warn-soft: #F6EEE2;       /* inbox banner, hints */
  --c-warn-soft-ink: #6E4E22;
  --c-info: #5B7C7A;            /* neutral bars */
  --c-ok-soft: #E1F0E8;         /* matched tag */
  --c-ok-ink: #1F5E43;
  --c-primary-soft: #EAF0F8;    /* category chip on slip lines */
  --c-primary-soft-border: #C3D3EA;
  --c-kid: #8A6532;             /* kid's card (design #A0763C, darkened for 4.5:1 white text) */
  --c-kid-track: #EDE3D4;
  --c-tip: #E8F0EE;
  --c-tip-ink: #24433C;
  --c-axis: #B7C3BF;
  --c-line-muted: #9AA8A4;      /* "now" line on what-if */
  --c-segment: #E3E9E7;         /* segmented tab track */
  --c-out-soft: #FBEDEB;
  --c-overlay: rgb(0 0 0 / .04);
  --c-scrim: rgb(0 0 0 / .4);
  --c-focus: #24508F;            /* focus ring: ≥ 3:1 on bg and surface (gold was 1.6:1 on light) */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --gutter: 20px;               /* screen side padding (designs) */

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-card: 16px;
  --radius-l: 20px;
  --radius-round: 999px;

  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;
  --fs-xs: .75rem;     /* 12 */
  --fs-s: .8125rem;    /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-m: .9375rem;    /* 15 body */
  --fs-ml: 1rem;       /* 16 */
  --fs-l: 1.125rem;    /* 18 section titles */
  --fs-xl: 1.375rem;   /* 22 screen titles */
  --fs-big: 1.5rem;    /* 24 tiles */
  --fs-hero: 2.5rem;   /* 40 left over */

  --shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .04);
  --shadow-2: 0 2px 6px rgb(0 0 0 / .10), 0 8px 24px rgb(0 0 0 / .08);

  --tap: 44px;
  --nav-h: 76px;
  --add-size: 56px;
  --rail-w: 96px;
  --content-max: 720px;
  --content-max-desk: 1200px; /* D53 desktop workbench */
  --rail-w-desk: 220px;
  --border-w: 1px;
  --focus-w: 3px;
  --bar-h: 6px;
  --bar-h-l: 8px;
  --curve-h: 96px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --c-bg: #121615;
    --c-surface: #1B201F;
    --c-text: #E8ECEA;
    --c-text-soft: #C4CDCA;
    --c-muted: #9AA5A2;
    --c-border: #2A3130;
    --c-border-strong: #3A4442;
    --c-nav-border: #2A3130;
    --c-primary: #7FA6DB;
    --c-primary-ink: #0E1412;
    --c-hero: #1F3E6B;
    --c-hero-ink: #FFFFFF;
    --c-in: #5CC08F;
    --c-out: #E07A6E;
    --c-out-bar: #C9675B;
    --c-warn-ink: #E2B97E;
    --c-warn-soft: #33291B;
    --c-warn-soft-ink: #E8C995;
    --c-axis: #46524F;
    --c-line-muted: #6E7C78;
    --c-segment: #252C2A;
    --c-out-soft: #3A2220;
    --c-overlay: rgb(255 255 255 / .05);
    --c-ok-soft: #1C3328;
    --c-ok-ink: #8FD3AE;
    --c-primary-soft: #1E2A3B;
    --c-primary-soft-border: #34496A;
    --c-kid: #7A5A2D;
    --c-kid-track: #3A3122;
    --c-tip: #1E2B28;
    --c-tip-ink: #BFD8D1;
    --c-focus: #F2C14E;
  }
}

:root[data-theme=dark] {
  --c-bg: #121615;
  --c-surface: #1B201F;
  --c-text: #E8ECEA;
  --c-text-soft: #C4CDCA;
  --c-muted: #9AA5A2;
  --c-border: #2A3130;
  --c-border-strong: #3A4442;
  --c-nav-border: #2A3130;
  --c-primary: #7FA6DB;
  --c-primary-ink: #0E1412;
  --c-hero: #1F3E6B;
  --c-hero-ink: #FFFFFF;
  --c-in: #5CC08F;
  --c-out: #E07A6E;
  --c-out-bar: #C9675B;
  --c-warn-ink: #E2B97E;
  --c-warn-soft: #33291B;
  --c-warn-soft-ink: #E8C995;
  --c-axis: #46524F;
  --c-line-muted: #6E7C78;
  --c-segment: #252C2A;
  --c-out-soft: #3A2220;
  --c-overlay: rgb(255 255 255 / .05);
  --c-ok-soft: #1C3328;
  --c-ok-ink: #8FD3AE;
  --c-primary-soft: #1E2A3B;
  --c-primary-soft-border: #34496A;
  --c-kid: #7A5A2D;
  --c-kid-track: #3A3122;
  --c-tip: #1E2B28;
  --c-tip-ink: #BFD8D1;
  --c-focus: #F2C14E;
}