/* ══════════════════════════════════════════════════════════════════════════
   PIÑA DIGITAL · design tokens for the ADA guide.

   THIS APP OWNS THESE VALUES. They are not synced with, generated from, or
   checked against anything — `apps/platform` keeps its own copy of the same
   design system under its own names, and the two are free to diverge. If the
   portal is repainted and you want this page repainted too, that is a
   deliberate edit here, not something a tool does for you.

   The palette is the Piña Digital / Recolector visual system: warm neutrals,
   purple action colour, Fredoka display over Figtree body, and the 135°
   diagonal cut. Dark mode is handled entirely in this file, so nothing below
   it in the cascade needs to know a theme exists.

   Every value has one definition per theme. `guide.css` reads these names and
   never a raw colour.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --ground:       #FBFAF7;   /* page background */
  --surface:      #FFFFFF;   /* cards, top bar, table body */
  --surface-2:    #F6F3ED;   /* notes, chips, table headers, inputs */

  /* ── Ink ───────────────────────────────────────────────────────────── */
  --ink:          #1B1725;   /* body text and headings */
  --ink-2:        #57506B;   /* secondary prose */
  --ink-3:        #8B839E;   /* labels, sources, captions */

  /* ── Lines ─────────────────────────────────────────────────────────── */
  --line:         #E7E1D8;   /* card and section borders */
  --line-strong:  #D5CDC1;   /* interactive: inputs, buttons, chips */
  --track:        #E9E4DB;   /* the progress bar's unfilled track */

  /* ── Accent ────────────────────────────────────────────────────────── */
  --accent:       #6A1FE0;             /* fills: checked box, progress bar */
  --accent-ink:   #5316B8;             /* accent as text: links, eyebrow */
  --accent-soft:  #F2EBFF;             /* accent as background: active ToC */
  --accent-ring:  rgba(106,31,224,.28);/* accent as a hairline or underline */

  /* White on the accent — the checkbox tick, the step numerals, the pressed
     segment. Kept literal in both themes on purpose: see the dark block. */
  --on-accent:    #FFFFFF;

  /* ── Brand accents ─────────────────────────────────────────────────────
     Decorative only, for the 135° .split ribbons. These are brand constants,
     so unlike everything else here they do NOT change between themes. Kept
     complete rather than trimmed to the four in use (navy, purple, pink,
     cyan) — a brand palette is a set, and the other three are one line.

     Note --p-purple (#762FFB, the ribbon purple) is a different hue from
     --accent (#6A1FE0, the action purple). Both read as "purple"; only one
     of them ever means "you can click this". */
  --p-amber:      #FCB301;
  --p-orange:     #FC5001;
  --p-pink:       #FA0254;
  --p-cyan:       #01A8FB;
  --p-teal:       #01BCA4;
  --p-purple:     #762FFB;
  --p-navy:       #2D2472;

  /* ── Status ────────────────────────────────────────────────────────────
     A hue, a background and a border each. The label always carries the
     meaning; colour never carries it alone. */
  --ok:           #0F7A55;
  --ok-soft:      #E3F3EB;
  --ok-line:      #B7DFCB;

  --warn:         #A96300;
  --warn-soft:    #FBEFDA;
  --warn-line:    #EBCF9A;

  --bad:          #C4104A;
  --bad-soft:     #FCE6ED;
  --bad-line:     #F2B9CB;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(27,23,37,.05), 0 10px 26px -16px rgba(27,23,37,.22);
  --shadow-2: 0 2px 6px rgba(27,23,37,.06), 0 22px 44px -24px rgba(27,23,37,.30);

  /* ── Geometry ──────────────────────────────────────────────────────────
     Generous for a long-form document. A dense table UI would want smaller. */
  --r:            14px;   /* notes, checklist rows, table frames */
  --r-lg:         20px;   /* cards and the verifier panel */

  /* ── Type ──────────────────────────────────────────────────────────── */
  --sans:    "Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --display: "Fredoka","Figtree",system-ui,sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK

   Declared twice, and both are needed: the media query serves readers whose
   OS is dark and who have expressed no preference here, while the attribute
   selector lets an explicit choice win in either direction. The media block
   is guarded by :not([data-theme="light"]) so choosing light beats the OS.

   Only the values change. Nothing below this file has a dark rule.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #141019;
    --surface:     #1D1826;
    --surface-2:   #251F31;

    --ink:         #F4F0FA;
    --ink-2:       #ADA3C0;
    --ink-3:       #7E7594;

    --line:        #312A44;
    --line-strong: #443A5C;
    --track:       #2C2539;

    --accent:      #A87CFF;
    --accent-ink:  #C6ABFF;
    --accent-soft: #2A1C46;
    --accent-ring: rgba(168,124,255,.34);

    /* KNOWN ISSUE: --on-accent stays white while --accent lightens to
       #A87CFF, so the checkbox tick and step numerals sit at roughly 2.2:1 —
       below AA. Inherited from the source document. The fix is one line
       (a dark ink here, e.g. #1D1826); it is left alone because changing it
       changes how the page already looks. */

    --ok:          #3FBF8B;
    --ok-soft:     #122C22;
    --ok-line:     #255C46;

    --warn:        #E0A02A;
    --warn-soft:   #33260E;
    --warn-line:   #6A4F13;

    --bad:         #F2547E;
    --bad-soft:    #39131F;
    --bad-line:    #6E2740;

    --shadow-1: 0 1px 2px rgba(0,0,0,.34), 0 10px 26px -16px rgba(0,0,0,.6);
    --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 22px 44px -24px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --ground:      #141019;
  --surface:     #1D1826;
  --surface-2:   #251F31;

  --ink:         #F4F0FA;
  --ink-2:       #ADA3C0;
  --ink-3:       #7E7594;

  --line:        #312A44;
  --line-strong: #443A5C;
  --track:       #2C2539;

  --accent:      #A87CFF;
  --accent-ink:  #C6ABFF;
  --accent-soft: #2A1C46;
  --accent-ring: rgba(168,124,255,.34);

  --ok:          #3FBF8B;
  --ok-soft:     #122C22;
  --ok-line:     #255C46;

  --warn:        #E0A02A;
  --warn-soft:   #33260E;
  --warn-line:   #6A4F13;

  --bad:         #F2547E;
  --bad-soft:    #39131F;
  --bad-line:    #6E2740;

  --shadow-1: 0 1px 2px rgba(0,0,0,.34), 0 10px 26px -16px rgba(0,0,0,.6);
  --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 22px 44px -24px rgba(0,0,0,.7);
}