/* Learnoodle design tokens. Everything visual comes from here; styles.css only uses var(--…).
   Rules (see README "Brand & UI"):
   - Indigo (--brand) is brand and reward only: logo, XP, streaks, finished lessons, lesson complete.
     Never a primary button and never feedback.
   - Ink is action: primary buttons, the selected answer, the next lesson.
   - Feedback is colour + icon + words, never colour alone.
   Contrast ratios for every pair are shown live in /styleguide.html. */

/* Fonts are loaded by a <link> in each page (faster than @import):
   Plus Jakarta Sans 600/700/800 and Atkinson Hyperlegible 400/700 from Google Fonts. */

:root,[data-theme="light"]{
  /* Neutrals */
  --bg:#FAF8F5;            /* warm off-white page */
  --surface:#FFFFFF;       /* cards */
  --surface-2:#F3F0EB;     /* quiet fills: tracks, wells, unselected chips */
  --ink:#0F172A;           /* text and primary actions */
  --ink-press:#000000;     /* bottom edge of ink buttons */
  --on-ink:#FFFFFF;
  --muted:#5E5B6B;         /* secondary text, 6.2:1 on --bg */
  --line:#E7E2DB;          /* card borders (decorative) */
  --line-strong:#8C8898;   /* control borders, 3.4:1 on surface (WCAG 1.4.11) */

  /* Brand: indigo, for the logo and reward moments only */
  --brand:#3D3DB8;
  --brand-press:#2A2A8F;
  --brand-soft:#E8E8FA;
  --on-brand:#FFFFFF;

  /* Feedback: always with an icon and words */
  --good:#157A45;      --good-soft:#E6F4EC;   --on-good:#FFFFFF;   /* correct */
  --bad:#C62A3A;       --bad-soft:#FBE9EB;    --on-bad:#FFFFFF;    /* wrong */
  --warn:#9A5807;      --warn-soft:#FDF1DC;   --on-warn:#FFFFFF;   /* unsure, hint, try again */
  --info:#475569;      --info-soft:#EEF1F5;   --on-info:#FFFFFF;   /* neutral information (slate, so it never reads as brand) */

  /* Match pairs: identifiers, not feedback (each also gets a number) */
  --pair-1:#2F6FA8; --pair-2:#A3416B; --pair-3:#0F7C80; --pair-4:#9A5807;

  /* Subject badges */
  --tag-1:#2F6FA8; --tag-2:#A3416B; --tag-3:#0F7C80; --tag-4:#9A5807; --tag-5:#4D6B1F; --tag-6:#53607A;

  /* Diagrams (lesson illustrations keep their own natural colours) */
  --d-water:#2F78B5; --d-water-soft:#DCEBF5; --d-basin:#F1F5EE; --d-shed:#8C8898; --d-hill:#C9D8BC; --d-hard:#8C949A; --d-soft:#E6D5B4; --d-sand:#EAD8A6;

  --focus:#3D3DB8;
  --shadow-pop:0 8px 24px rgb(15 23 42 / .08);
  color-scheme:light;
}

/* Dark: designed, not inverted. A warm charcoal rather than pure black; ink becomes the light
   colour, so primary buttons flip to light-on-dark; indigo lightens to #8E8EF7 so it stays recognisable. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#131219; --surface:#1C1B24; --surface-2:#26252F;
  --ink:#F3F0EA; --ink-press:#B9B5AE; --on-ink:#131219;
  --muted:#A9A5B4; --line:#2D2B38; --line-strong:#6E6A7C;
  --brand:#8E8EF7; --brand-press:#5F5FD6; --brand-soft:#23234A; --on-brand:#0B0B2A;
  --good:#47C77F; --good-soft:#16291F; --on-good:#131219;
  --bad:#FF7A72;  --bad-soft:#3A1A1C;  --on-bad:#131219;
  --warn:#F0B44C; --warn-soft:#33280F; --on-warn:#131219;
  --info:#B4BFD0; --info-soft:#232833; --on-info:#131219;
  --pair-1:#7FB6E8; --pair-2:#EE93BB; --pair-3:#5CC9CC; --pair-4:#F0B44C;
  --tag-1:#7FB6E8; --tag-2:#EE93BB; --tag-3:#5CC9CC; --tag-4:#F0B44C; --tag-5:#A6CF6B; --tag-6:#AEB9CF;
  --d-water:#5CA8DE; --d-water-soft:#1A3346; --d-basin:#1D2420; --d-shed:#6E6A7C; --d-hill:#33452F; --d-hard:#58616A; --d-soft:#6E5E40; --d-sand:#7A6A3E;
  --focus:#8E8EF7;
  --shadow-pop:0 8px 24px rgb(0 0 0 / .4);
  color-scheme:dark;
}}
[data-theme="dark"]{
  --bg:#131219; --surface:#1C1B24; --surface-2:#26252F;
  --ink:#F3F0EA; --ink-press:#B9B5AE; --on-ink:#131219;
  --muted:#A9A5B4; --line:#2D2B38; --line-strong:#6E6A7C;
  --brand:#8E8EF7; --brand-press:#5F5FD6; --brand-soft:#23234A; --on-brand:#0B0B2A;
  --good:#47C77F; --good-soft:#16291F; --on-good:#131219;
  --bad:#FF7A72;  --bad-soft:#3A1A1C;  --on-bad:#131219;
  --warn:#F0B44C; --warn-soft:#33280F; --on-warn:#131219;
  --info:#B4BFD0; --info-soft:#232833; --on-info:#131219;
  --pair-1:#7FB6E8; --pair-2:#EE93BB; --pair-3:#5CC9CC; --pair-4:#F0B44C;
  --tag-1:#7FB6E8; --tag-2:#EE93BB; --tag-3:#5CC9CC; --tag-4:#F0B44C; --tag-5:#A6CF6B; --tag-6:#AEB9CF;
  --d-water:#5CA8DE; --d-water-soft:#1A3346; --d-basin:#1D2420; --d-shed:#6E6A7C; --d-hill:#33452F; --d-hard:#58616A; --d-soft:#6E5E40; --d-sand:#7A6A3E;
  --focus:#8E8EF7;
  --shadow-pop:0 8px 24px rgb(0 0 0 / .4);
  color-scheme:dark;
}

:root{
  /* Type. Headings: Plus Jakarta Sans, a neutral grotesk with open apertures; firm, not rounded.
     Body: Atkinson Hyperlegible, designed for letter distinction (Il1, 0O). */
  --f-display:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --fs-xs:.75rem;     /* 12  labels, eyebrows */
  --fs-sm:.875rem;    /* 14  secondary text */
  --fs-base:1.0625rem;/* 17  body */
  --fs-md:1.1875rem;  /* 19  card titles */
  --fs-lg:1.375rem;   /* 22  question prompts (mobile), feedback titles */
  --fs-xl:1.625rem;   /* 26  question prompts, section titles */
  --fs-2xl:2rem;      /* 32  screen titles */
  --fs-3xl:2.5rem;    /* 40  hero numbers */
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.5;
  --fw-body:400; --fw-bold:700; --fw-heavy:800;
  --tracking-label:.08em;

  /* Space: 4px base */
  --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;

  /* Shape */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --border:1px;
  --edge:3px;          /* tactile bottom edge on pressable things; compresses on press */
  --tap:44px;          /* minimum tap target */
  --measure:560px;     /* content column */

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.12s; --t-med:.25s;
}