/* MagpieFeed design tokens: the ONE source (docs/specs/redesign-v3.md, "Tokens").

   Used by:
     - Django templates: linked from web/public_base.html, web/base.html and the
       standalone public pages through web/_head_assets.html.
     - Tailwind 4: resources/css/app.css @imports this file and maps every token
       into @theme, so the SPA gets bg-paper, text-ink, text-blue, border-line ...

   Light is the default; dark overrides the same names under
   prefers-color-scheme, so nothing downstream needs a second stylesheet.
   `screen and` keeps printed legal pages black on white.

   Contrast (WCAG AA 4.5:1 for text), measured on --paper and --canvas:
     light  --ink #12151b 18.4:1 · --text #3a3e46 11.0:1 · --muted #5b5f68 6.5:1
            (--muted on --bg-sunk 5.6:1) · --blue #2d56a0 7.0:1 · white on --fill-blue 7.0:1
     dark   --ink #eef0f3 16.2:1 · --text #c9cdd4 11.4:1 · --muted #9ca1ab 6.9:1
            --blue #7fa2e0 6.9:1 · --on-fill-blue on --fill-blue 7.4:1
   --faint is for placeholders (and status dots) only, never body copy. Placeholders are
   text too, so it clears AA on the field fill: light #70747c 4.7:1 on --field,
   dark #7f848e 4.9:1 on --field (4.7:1 on --paper). */

:root {
  color-scheme: light dark;

  /* ---- colour: text */
  --ink: #12151b;          /* headings, primary (ink) button fill, dark band */
  --text: #3a3e46;         /* body copy */
  --muted: #5b5f68;        /* secondary copy */
  --faint: #70747c;        /* placeholders only (AA on --field) */

  /* ---- colour: brand */
  --blue: #2d56a0;         /* accent, links, blue CTA */
  --blue-press: #234684;   /* hover/pressed fill for blue buttons */
  --blue-soft: #eaf0fa;    /* chips, active chapter, selected rows */
  --blue-line: #c9d7ef;    /* border of a blue-soft surface */

  /* ---- colour: logo bars (web/_logo.html, Logo.vue). The ink bar turns light in dark. */
  --logo-a: #12151b;
  --logo-b: #2d56a0;

  /* ---- colour: surfaces */
  --canvas: #ffffff;      /* page background */
  --paper: #ffffff;        /* cards, popovers, fields */
  --bg-warm: #f7f5f0;      /* alternating band */
  --bg-sunk: #f1eee8;      /* segmented-control track, secondary button */
  --line: #ebe7de;         /* card borders */
  --line-soft: #eeebe4;    /* section rules */
  --field-line: #d6d2c8;   /* input borders */
  --field: #ffffff;        /* input fill */
  --header: rgba(255, 255, 255, .9);  /* sticky header (backdrop-blurred) */

  /* ---- colour: filled buttons (fill + the text that sits on it) */
  --fill-ink: #12151b;     --on-fill-ink: #ffffff;
  --fill-blue: #2d56a0;    --on-fill-blue: #ffffff;
  --fill-ink-press: #2a2f39;

  /* ---- colour: the dark band (final CTA, video bezel), dark in BOTH schemes */
  --band: #12151b;
  --on-band: #ffffff;
  --on-band-soft: #b5bac3;
  --on-band-line: #3a3f4a;

  /* ---- colour: status. Red is ONLY for errors. */
  --danger: #b42318;       --danger-soft: #fef3f2;  --danger-line: #fecdca;
  --ok: #067647;           --ok-soft: #ecfdf3;      --ok-line: #abefc6;
  --warn: #93370d;         --warn-soft: #fffaeb;    --warn-line: #fedf89;

  /* ---- type */
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --display-1: clamp(40px, 5vw, 60px);   /* h1, line-height 1.02 */
  --display-2: clamp(30px, 3.6vw, 42px); /* h2, line-height 1.05 */

  /* ---- shape */
  --r-sm: 8px;     /* buttons, small controls */
  --r-md: 10px;    /* fields, hero buttons, segmented control */
  --r-lg: 14px;    /* cards, video, plan cards */
  --shadow: 0 1px 2px rgba(18, 21, 27, .06);
  --shadow-lg: 0 24px 60px -24px rgba(18, 21, 27, .25), 0 1px 0 rgba(0, 0, 0, .04);
  --ring: 0 0 0 3px rgba(45, 86, 160, .25);   /* focus halo on fields */

  /* ---- spacing (unchanged scale from landing-v2) */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem; --s9: 6.5rem;
  --gutter: clamp(20px, 4vw, 48px);
  --head-h: 3.75rem;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --ink: #eef0f3;
    --text: #c9cdd4;
    --muted: #9ca1ab;
    --faint: #7f848e;

    --blue: #7fa2e0;
    --blue-press: #9bb8ea;
    --blue-soft: #1c2940;
    --blue-line: #2e4166;

    --logo-a: #eef0f3;
    --logo-b: #5b86d4;

    --canvas: #0f1217;
    --paper: #171a21;
    --bg-warm: #13161c;
    --bg-sunk: #242832;
    --line: #2a2f38;
    --line-soft: #22262e;
    --field-line: #3d434e;
    --field: #13161c;
    --header: rgba(15, 18, 23, .9);

    /* filled buttons invert: a light fill carries dark text */
    --fill-ink: #eef0f3;     --on-fill-ink: #12151b;
    --fill-blue: #7fa2e0;    --on-fill-blue: #0f1217;
    --fill-ink-press: #d3d7de;

    --band: #1a1e26;
    --on-band: #eef0f3;
    --on-band-soft: #a9afb9;
    --on-band-line: #3a404c;

    --danger: #fda29b;       --danger-soft: #2d1311;  --danger-line: #6e2a24;
    --ok: #75e0a7;           --ok-soft: #0e2a1d;      --ok-line: #1f5a3d;
    --warn: #fec84b;         --warn-soft: #2b2110;    --warn-line: #6b4e12;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .03);
    --ring: 0 0 0 3px rgba(127, 162, 224, .35);
  }
}