/* =============================================================================
   DESIGN TOKENS — the only place a colour is chosen.
   =============================================================================
   Components reference var(--surface), never #fdf8ee. That is what makes the
   dark theme a re-declaration of ~30 values rather than an audit of every file
   (spec §5).

   The dark palette is NOT an inversion. Inverting a warm woodland scheme gives
   you a cold grey one and the whole character of the product evaporates. These
   are hand-picked so night-time Acorn Grove reads as dusk in a wood — warm
   lantern light on deep green — and every pairing below clears WCAG AA for
   body text (spec §40).
   ============================================================================= */

:root {
  color-scheme: light;

  /* --- brand hues ------------------------------------------------------- */
  --moss-900: #1f3a2c;
  --moss-700: #2f5a42;
  --moss-500: #4a8760;
  --moss-300: #9ccfae;
  --moss-100: #dcf0e2;

  --bark-900: #3a2a1c;
  --bark-700: #6b4f34;
  --bark-500: #9c7850;
  --bark-300: #d6bb95;
  --bark-100: #f0e2cd;

  --berry-600: #b23a5c;
  --berry-400: #e0728e;
  --berry-100: #fbe0e7;

  --sun-600: #d98f1c;
  --sun-400: #f5b942;
  --sun-100: #fdeecd;

  --sky-600: #2b6f9c;
  --sky-400: #63a8d1;
  --sky-100: #dcefF9;

  /* --- semantic: surfaces ----------------------------------------------- */
  --bg: #fdf7ea;             /* warm paper, not white — easier on young eyes */
  --bg-pattern: #f5ebd7;
  --surface: #fffdf7;
  --surface-sunken: #f7efdd;
  --surface-raised: #ffffff;

  /* --- semantic: ink ---------------------------------------------------- */
  --ink: #2b2318;
  --ink-soft: #6b5b45;
  --ink-faint: #9c8a70;
  --ink-inverse: #fffdf7;

  /* --- semantic: lines & shadow ----------------------------------------- */
  --line: #e0d0b2;
  --line-strong: var(--bark-500);
  /* Offset rather than blurred: reads as a paper sticker lying on a page. */
  --shadow-sticker: 0 3px 0 rgba(107, 79, 52, 0.28);
  --shadow-lift: 0 6px 0 rgba(107, 79, 52, 0.28);
  --shadow-soft: 0 6px 20px rgba(58, 42, 28, 0.1);

  /* --- semantic: roles -------------------------------------------------- */
  --primary: var(--moss-700);
  --primary-ink: #ffffff;
  --primary-soft: var(--moss-100);

  --accent: var(--berry-600);
  --accent-soft: var(--berry-100);

  --correct: #2f7d4f;
  --correct-soft: #dff2e4;
  /* "Not yet" is amber, never red. A wrong answer is information, not danger. */
  --notyet: #b8751a;
  /* Orange as TEXT: 5.1:1 on the page (WCAG AA). --notyet stays for rings and borders. */
  --notyet-ink: #9a5f12;
  /* "Continue with Google": Google's own light/dark button colours. */
  --google-bg: #ffffff;  --google-ink: #1f1f1f;  --google-line: #747775;
  --notyet-soft: #fdeecd;

  /* --- per-skill identity ------------------------------------------------ */
  --skill-speaking: var(--berry-600);
  --skill-speaking-soft: var(--berry-100);
  --skill-listening: var(--sky-600);
  --skill-listening-soft: var(--sky-100);
  --skill-reading: var(--moss-700);
  --skill-reading-soft: var(--moss-100);
  --skill-writing: var(--sun-600);
  --skill-writing-soft: var(--sun-100);

  /* --- the garden (home) ------------------------------------------------- */
  --soil: #ead5b3;
  --soil-speck: #d9bf96;
  --soil-mound: #cfae7f;
  --sky-wash: var(--sky-100);

  /* --- shape ------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;
  --border-w: 2.5px;

  /* --- space (4px base) --------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* --- type --------------------------------------------------------------- */
  /* System rounded stacks: no webfont download, so the first paint is instant
     on a school tablet with a poor connection (spec §38). */
  --font-display: "Baloo 2", "Chalkboard SE", "Comic Sans MS", "Trebuchet MS",
    ui-rounded, system-ui, sans-serif;
  --font-body: ui-rounded, "SF Pro Rounded", "Segoe UI Variable", "Segoe UI",
    system-ui, -apple-system, sans-serif;
  --font-reading: "Iowan Old Style", Georgia, "Times New Roman", serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.625rem;
  --t-2xl: 2.125rem;
  --t-3xl: 2.75rem;

  /* --- motion ------------------------------------------------------------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
  --dur-slow: 480ms;

  /* --- touch -------------------------------------------------------------- */
  /* 56px, not the usual 44. These are small hands on a tablet (spec §39). */
  --tap-min: 56px;
}

/* =============================================================================
   DARK — dusk in the grove.
   Applies when the OS asks for it, unless the learner has explicitly chosen
   light; and always when they have explicitly chosen dark.
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: #16211c;
    --bg-pattern: #1b2822;
    --surface: #1f2d26;
    --surface-sunken: #192420;
    --surface-raised: #27362d;

    --ink: #f2e9d8;
    --ink-soft: #c2b59d;
    --ink-faint: #8d8271;
    --ink-inverse: #16211c;

    --line: #38493e;
    --line-strong: #5d7364;
    --shadow-sticker: 0 3px 0 rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 6px 0 rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.35);

    /* Lifted and desaturated: full-strength brand colour on a dark ground
       vibrates and is genuinely uncomfortable to read. */
    --primary: #7cc394;
    --primary-ink: #10241a;
    --primary-soft: #26382d;

    --accent: #f090aa;
    --accent-soft: #3d2730;

    --correct: #78c894;
    --correct-soft: #22392c;
    --notyet: #f0b95e;
    --notyet-ink: #f0b95e;
    --google-bg: #131314;  --google-ink: #e3e3e3;  --google-line: #8e918f;
    --notyet-soft: #3a2f1c;

    --skill-speaking: #f090aa;
    --skill-speaking-soft: #3d2730;
    --skill-listening: #7fbde2;
    --skill-listening-soft: #1e3240;
    --skill-reading: #7cc394;
    --skill-reading-soft: #22392c;
    --skill-writing: #f0c069;
    --skill-writing-soft: #3a2f1c;

    --soil: #2b241a;
    --soil-speck: #3a3124;
    --soil-mound: #4a3d2b;
    --sky-wash: #1c2c33;
  }
}

/* Explicit choice wins over the OS, in both directions. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #16211c;
  --bg-pattern: #1b2822;
  --surface: #1f2d26;
  --surface-sunken: #192420;
  --surface-raised: #27362d;

  --ink: #f2e9d8;
  --ink-soft: #c2b59d;
  --ink-faint: #8d8271;
  --ink-inverse: #16211c;

  --line: #38493e;
  --line-strong: #5d7364;
  --shadow-sticker: 0 3px 0 rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 6px 0 rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.35);

  --primary: #7cc394;
  --primary-ink: #10241a;
  --primary-soft: #26382d;

  --accent: #f090aa;
  --accent-soft: #3d2730;

  --correct: #78c894;
  --correct-soft: #22392c;
  --notyet: #f0b95e;
  --notyet-ink: #f0b95e;
  --google-bg: #131314;  --google-ink: #e3e3e3;  --google-line: #8e918f;
  --notyet-soft: #3a2f1c;

  --skill-speaking: #f090aa;
  --skill-speaking-soft: #3d2730;
  --skill-listening: #7fbde2;
  --skill-listening-soft: #1e3240;
  --skill-reading: #7cc394;
  --skill-reading-soft: #22392c;
  --skill-writing: #f0c069;
  --skill-writing-soft: #3a2f1c;

  --soil: #2b241a;
  --soil-speck: #3a3124;
  --soil-mound: #4a3d2b;
  --sky-wash: #1c2c33;
}