/* ============================================================
   GED Prep — Design Tokens
   Every color, size, radius and shadow lives here.
   Views must reference tokens by name — no raw hex in styles.css.
   ============================================================ */

:root {
  /* ---------- Type ---------- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-text: "Hanken Grotesk", sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-md: 1.0625rem;   /* 17px — body */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.625rem;    /* 26px */
  --text-2xl: 2.125rem;   /* 34px */
  --text-3xl: 2.875rem;   /* 46px */

  --leading-body: 1.65;
  --leading-tight: 1.15;

  /* ---------- Spacing (4pt grid) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --container: 1100px;
  --container-narrow: 760px;

  /* ---------- Radii ---------- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-full: 999px;

  /* ---------- Light theme (warm paper) ---------- */
  --paper: #FAF7F0;          /* page ground */
  --surface: #FFFFFF;        /* raised card */
  --surface-2: #F3EEE3;      /* inset / wells */
  --ink: #1C1E22;            /* primary text */
  --ink-soft: #4A4F57;       /* secondary text */
  --ink-faint: #8A8F98;      /* tertiary / captions */
  --line: #E4DECF;           /* hairlines */
  --line-strong: #C9C2B0;

  /* Brand — one action color. Appears on actions only. */
  --brand: #0B7A5E;
  --brand-strong: #08654E;
  --brand-tint: #E3F1EB;
  --on-brand: #FFFFFF;

  /* Feedback */
  --good: #2E7D46;
  --good-tint: #E5F2E7;
  --warn: #B4690E;
  --warn-tint: #F9EEDC;
  --bad: #C03D33;
  --bad-tint: #F9E7E4;

  /* ---------- Subject palettes (named, used by data-subject) ---------- */
  --math: #3556E0;      --math-deep: #24398F;    --math-tint: #E8ECFB;   --math-soft:#C6D0F5;
  --rla: #D4574B;       --rla-deep: #8F352D;     --rla-tint: #FBEAE7;    --rla-soft:#F3C6BF;
  --sci: #2E9E63;       --sci-deep: #1D6B42;     --sci-tint: #E6F4EB;    --sci-soft:#BFE5CE;
  --ss: #C4820E;        --ss-deep: #7E540A;      --ss-tint: #F8EFDC;     --ss-soft:#EDD6A3;

  /* ---------- Diagram tokens (SVG library reads these) ---------- */
  --dg-line: #2A2D33;
  --dg-grid: #DAD3C2;
  --dg-a: #3556E0;   /* series A / rise */
  --dg-b: #D4574B;   /* series B / run  */
  --dg-c: #2E9E63;
  --dg-d: #C4820E;
  --dg-fill-a: #C6D0F5;
  --dg-fill-b: #F3C6BF;
  --dg-fill-c: #BFE5CE;
  --dg-fill-d: #EDD6A3;
  --dg-paper: #FFFFFF;

  /* ---------- Depth (two-layer shadows) ---------- */
  --shadow-1: 0 1px 2px rgba(28,30,34,.08), 0 8px 24px rgba(28,30,34,.06);
  --shadow-2: 0 2px 4px rgba(28,30,34,.10), 0 16px 40px rgba(28,30,34,.10);

  --focus-ring: 0 0 0 3px rgba(11,122,94,.35);

  /* Motion */
  --ease: cubic-bezier(.22,.7,.35,1);
  --t-fast: 160ms;
  --t-med: 240ms;
}

/* ---------- Dark theme (designed, not inverted) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121316;
    --surface: #1A1C20;
    --surface-2: #212429;
    --ink: #ECEDEF;
    --ink-soft: #B4B8BF;
    --ink-faint: #7E838B;
    --line: #2B2E34;
    --line-strong: #3C4048;

    --brand: #37B68E;
    --brand-strong: #2C9A78;
    --brand-tint: #1B2F29;
    --on-brand: #0C1512;

    --good: #58B573;   --good-tint: #1D2B20;
    --warn: #D9944A;   --warn-tint: #2F2519;
    --bad:  #D96A5F;   --bad-tint:  #2F1D1B;

    --math: #7C93EE;  --math-deep:#A9B8F4; --math-tint:#1C2136; --math-soft:#2C3560;
    --rla:  #E28A80;  --rla-deep:#EEB0A8;  --rla-tint:#301F1D;  --rla-soft:#57302B;
    --sci:  #5CBE8C;  --sci-deep:#8AD3AC;  --sci-tint:#182A20;  --sci-soft:#254D37;
    --ss:   #DCA83F;  --ss-deep:#E9C57E;   --ss-tint:#2C2414;   --ss-soft:#544220;

    --dg-line: #D7D9DD;
    --dg-grid: #34383F;
    --dg-a: #7C93EE;  --dg-b: #E28A80;  --dg-c: #5CBE8C;  --dg-d: #DCA83F;
    --dg-fill-a: #2C3560; --dg-fill-b: #57302B; --dg-fill-c: #254D37; --dg-fill-d: #544220;
    --dg-paper: #1A1C20;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
    --focus-ring: 0 0 0 3px rgba(55,182,142,.45);
  }
}

[data-theme="dark"] {
  --paper: #121316; --surface: #1A1C20; --surface-2: #212429;
  --ink: #ECEDEF; --ink-soft: #B4B8BF; --ink-faint: #7E838B;
  --line: #2B2E34; --line-strong: #3C4048;
  --brand: #37B68E; --brand-strong: #2C9A78; --brand-tint: #1B2F29; --on-brand: #0C1512;
  --good: #58B573; --good-tint: #1D2B20; --warn: #D9944A; --warn-tint: #2F2519;
  --bad: #D96A5F; --bad-tint: #2F1D1B;
  --math: #7C93EE; --math-deep:#A9B8F4; --math-tint:#1C2136; --math-soft:#2C3560;
  --rla: #E28A80; --rla-deep:#EEB0A8; --rla-tint:#301F1D; --rla-soft:#57302B;
  --sci: #5CBE8C; --sci-deep:#8AD3AC; --sci-tint:#182A20; --sci-soft:#254D37;
  --ss: #DCA83F; --ss-deep:#E9C57E; --ss-tint:#2C2414; --ss-soft:#544220;
  --dg-line: #D7D9DD; --dg-grid: #34383F;
  --dg-a: #7C93EE; --dg-b: #E28A80; --dg-c: #5CBE8C; --dg-d: #DCA83F;
  --dg-fill-a: #2C3560; --dg-fill-b: #57302B; --dg-fill-c: #254D37; --dg-fill-d: #544220;
  --dg-paper: #1A1C20;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
  --focus-ring: 0 0 0 3px rgba(55,182,142,.45);
}