/* ==========================================================================
   studywithsoph — shared design tokens
   ==========================================================================
   The contract: every subject site imports this file and gets the full
   system. A subject skin overrides ONLY the colour block for its
   [data-subject] and supplies its own mascot/theme assets. Everything
   else — type scale, spacing, radii, depth, motion — is shared and
   deliberately not overridable per subject.

   Rules baked in (research/design-direction.md, signed off 2026-08-17):
   - Pastels are surfaces, never information. All text/icons use --ink.
   - Max 3 pastel hues per subject + paper; lightness variants for range.
   - One bolder accent per subject, ~5% of surface, actions only.
   - Contrast by construction: every ink/surface pair in this file passes
     WCAG 4.5:1 (body) — verified with tools/check_contrast.py.
   - Depth language DECIDED (Dave, 2026-08-17): tint — shadowless, depth
     from fill changes. Components consume the --depth-* tokens only.
   ========================================================================== */

:root {
  /* ---- type scale (mobile-first, 1.2 ratio) ---- */
  --text-xs: 0.8125rem;   /* 13px — captions, chips */
  --text-sm: 0.875rem;    /* 14px — secondary */
  --text-base: 1rem;      /* 16px — body */
  --text-md: 1.1875rem;   /* 19px — lead, quiz questions */
  --text-lg: 1.4375rem;   /* 23px — section titles */
  --text-xl: 1.75rem;     /* 28px — page titles */
  --text-2xl: 2.125rem;   /* 34px — hero / celebration */

  --weight-body: 400;
  --weight-emphasis: 600;
  --weight-strong: 700;
  --weight-display: 800;  /* display face only */

  --leading-tight: 1.15;
  --leading-body: 1.55;

  /* ---- spacing (4px grid) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---- shape ---- */
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-pill: 999px;
  --touch-target: 44px;   /* minimum hit area, everywhere */

  /* ---- layout ---- */
  --measure: 28rem;       /* phone-first content column */
  --measure-wide: 64rem;  /* desktop enhancement */

  /* ---- motion: feedback, never ornament ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   Typography DECIDED (Dave, 2026-08-17): Nunito display + Inter body.
   The celebration face is Baloo 2, celebration moments ONLY.
   -------------------------------------------------------------------------- */
:root {
  --font-display: "Nunito", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-party: "Baloo 2", "Nunito", sans-serif;
}

/* --------------------------------------------------------------------------
   Subject skins — colour only. Semantic names, so components never touch
   raw hex. Verified pairs (tools/check_contrast.py, 2026-08-17):
   ink on paper/surfaces ≥ 9.8:1, soft ink ≥ 5.0:1, on-accent 5.4:1+,
   success ink ≥ 5.1:1, accent vs paper ≥ 3:1 (focus/icons).
   -------------------------------------------------------------------------- */

/* Spanish — "playa": sun-bleached seaside. Sand, sea, terracotta. */
:root,
[data-subject="spanish"] {
  --paper: #FAF6EE;         /* page ground — warm cream */
  --ink: #3A322C;           /* the one ink: dark warm brown */
  --ink-soft: #6B5F55;      /* secondary text */

  --surface-1: #F2E7D4;     /* sand — default card */
  --surface-1-deep: #E7D8BE;
  --surface-2: #DCEDE7;     /* pale sea — positive/progress contexts */
  --surface-2-deep: #C9E2D8;
  --surface-3: #F7E0D3;     /* pastel terracotta — highlights, chips */
  --surface-3-deep: #EFCDB9;

  --accent: #B04A2C;        /* deep terracotta — primary actions, ~5% */
  --on-accent: #FFFFFF;
  --success: #2F6B5C;       /* deep sea green — correct, complete */
}

/* French — "paris": café mist, rose, soft gold. */
[data-subject="french"] {
  --paper: #F7F6F2;
  --ink: #2E3247;           /* the one ink: deep navy */
  --ink-soft: #5C6178;

  --surface-1: #DDE4F1;     /* mist blue — default card */
  --surface-1-deep: #C9D4E8;
  --surface-2: #F3DEE4;     /* rose */
  --surface-2-deep: #EACBD6;
  --surface-3: #F0E7D0;     /* soft gold */
  --surface-3-deep: #E3D5B4;

  --accent: #3F5DA8;        /* French blue */
  --on-accent: #FFFFFF;
  --success: #2F6B5C;
}

/* --------------------------------------------------------------------------
   Depth language: tint (DECIDED 2026-08-17) — shadowless; depth from fill
   changes and tint blocks. Press feedback is a brightness dip, not a sink.
   Components consume only these tokens, so the language stays swappable
   in exactly one place.
   -------------------------------------------------------------------------- */
:root {
  --depth-card: none;
  --depth-raise: none;
  --depth-border: transparent;
  --press-sink: 0px;
}