/* ============================================================================
   Design tokens: off by heart
   ----------------------------------------------------------------------------
   The only file that should contain a raw colour, a size or a duration. Every
   other stylesheet reads from here, so re-skinning the app means editing this
   file and nothing else.

   COLOUR RULE: the palette below is the brand board, exactly as given. No other
   hex value appears in this file except #ffffff, and one red noted at the very
   bottom. Everything else a UI needs (borders, hovers, tinted panels, sunken
   wells) is mixed from those brand colours with color-mix, so the whole app is
   provably made of the five colours on the board and nothing has been invented.

   Two layers:
     --brand-*   the board's palette. Never used directly by a component.
     everything  semantic tokens (--bg, --ink, --accent) that components read,
     else        so light and dark differ without a component knowing.
   ============================================================================ */

:root {
  /* -- the brand board, verbatim ------------------------------------------ */
  --brand-primary: #0b3d33;    /* Primary    */
  --brand-accent: #22d3a2;     /* Accent     */
  --brand-ink: #0b0f0e;        /* Background */
  --brand-surface: #f1f5f3;    /* Surface    */
  --brand-muted: #6b7b76;      /* Muted      */

  --brand-biology: #16a34a;
  --brand-chemistry: #9333ea;
  --brand-physics: #2563eb;

  /* -- spacing ------------------------------------------------------------ */
  /* A 4px base. Components should never invent a value between these. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 34px;
  --space-8: 48px;

  /* -- shape -------------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* -- layout ------------------------------------------------------------- */
  --width-page: 44rem;
  --width-read: 34rem;
  --tap: 48px;                 /* minimum touch target, never go below this */
  --bar-height: 56px;

  /* -- motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;

  /* -- the dark scheme, defined once -------------------------------------- */
  /* Held here so the two places that use it, the OS dark preference and the
     always-dark sign-in screen, share one set of values rather than a copy. */
  --dark-bg: var(--brand-ink);
  --dark-surface: color-mix(in srgb, var(--brand-surface) 7%, var(--brand-ink));
  --dark-surface-sunk: color-mix(in srgb, var(--brand-surface) 3%, var(--brand-ink));
  --dark-ink: color-mix(in srgb, var(--brand-surface) 95%, var(--brand-ink));
  --dark-ink-soft: color-mix(in srgb, var(--brand-surface) 62%, var(--brand-ink));
  --dark-ink-faint: var(--brand-muted);
  --dark-line: color-mix(in srgb, var(--brand-surface) 13%, var(--brand-ink));
  --dark-line-strong: color-mix(in srgb, var(--brand-surface) 26%, var(--brand-ink));
  --dark-accent: var(--brand-accent);
  --dark-accent-soft: color-mix(in srgb, var(--brand-accent) 13%, var(--brand-ink));
  --dark-action-hover: color-mix(in srgb, var(--brand-accent) 82%, var(--brand-surface));
  --dark-right: var(--brand-accent);
  --dark-right-soft: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-ink));
  --dark-wrong-soft: color-mix(in srgb, var(--wrong) 18%, var(--brand-ink));
  --dark-part-soft: color-mix(in srgb, var(--brand-muted) 18%, var(--brand-ink));
  --dark-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --dark-shadow-2: 0 10px 30px rgb(0 0 0 / 0.5);

  /* -- semantic: light ---------------------------------------------------- */
  --bg: #ffffff;
  --surface: var(--brand-surface);
  --surface-sunk: color-mix(in srgb, var(--brand-muted) 12%, var(--brand-surface));

  --ink: var(--brand-ink);
  --ink-soft: color-mix(in srgb, var(--brand-ink) 74%, var(--brand-surface));
  --ink-faint: var(--brand-muted);
  --line: color-mix(in srgb, var(--brand-muted) 26%, transparent);
  --line-strong: color-mix(in srgb, var(--brand-muted) 52%, transparent);

  --accent: var(--brand-primary);
  --accent-soft: color-mix(in srgb, var(--brand-accent) 15%, var(--brand-surface));

  --action: var(--brand-accent);
  --action-ink: var(--brand-ink);
  --action-hover: color-mix(in srgb, var(--brand-accent) 86%, var(--brand-ink));

  /* Right is the brand's own green. Partial is deliberately neutral, so the
     three verdicts read as good, nothing, bad without needing an amber the
     board does not have. */
  --right: var(--brand-primary);
  --right-soft: color-mix(in srgb, var(--brand-accent) 16%, var(--brand-surface));
  --part: var(--brand-muted);
  --part-soft: color-mix(in srgb, var(--brand-muted) 14%, var(--brand-surface));
  --wrong-soft: color-mix(in srgb, var(--wrong) 10%, var(--brand-surface));

  --biology: var(--brand-biology);
  --chemistry: var(--brand-chemistry);
  --physics: var(--brand-physics);

  --shadow-1: 0 1px 2px color-mix(in srgb, var(--brand-ink) 8%, transparent);
  --shadow-2: 0 8px 26px color-mix(in srgb, var(--brand-ink) 16%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 45%, transparent);

  /* The one colour not on the brand board.
     A wrong answer has to look wrong, and nothing in a green and mint palette
     can say that. If the brand ever gains a red, change this line and the whole
     app follows. */
  --wrong: #c2352b;
}

/* -- semantic: dark --------------------------------------------------------
   Not an inversion. The board's screens are dark, so this is the primary
   experience, and the mint does the work the deep green does on light. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --surface-sunk: var(--dark-surface-sunk);
    --ink: var(--dark-ink);
    --ink-soft: var(--dark-ink-soft);
    --ink-faint: var(--dark-ink-faint);
    --line: var(--dark-line);
    --line-strong: var(--dark-line-strong);
    --accent: var(--dark-accent);
    --accent-soft: var(--dark-accent-soft);
    --action-hover: var(--dark-action-hover);
    --right: var(--dark-right);
    --right-soft: var(--dark-right-soft);
    --wrong: #e4685d;
    --wrong-soft: var(--dark-wrong-soft);
    --part-soft: var(--dark-part-soft);
    --shadow-1: var(--dark-shadow-1);
    --shadow-2: var(--dark-shadow-2);
  }
}

/* Surfaces that are dark whatever the device is set to. The sign-in screen is
   the only one: the board draws it dark, and it is the brand's first
   impression. */
.theme-dark {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --surface-sunk: var(--dark-surface-sunk);
  --ink: var(--dark-ink);
  --ink-soft: var(--dark-ink-soft);
  --ink-faint: var(--dark-ink-faint);
  --line: var(--dark-line);
  --line-strong: var(--dark-line-strong);
  --accent: var(--dark-accent);
  --accent-soft: var(--dark-accent-soft);
  --action-hover: var(--dark-action-hover);
  --right: var(--dark-right);
  --right-soft: var(--dark-right-soft);
  --wrong: #e4685d;
  --wrong-soft: var(--dark-wrong-soft);
  --part-soft: var(--dark-part-soft);
  --shadow-1: var(--dark-shadow-1);
  --shadow-2: var(--dark-shadow-2);
  color-scheme: dark;
}