/* nappa tokens: draft 1 (2026-10-29, CD). Territory A "Aukko".
   Contrast ratios measured with the WCAG formula (work/creative-brief.md palette).
   Forecast scale: the app's 5 map states; Top 5 % value is finalised by the graphic designer's scale check. */

:root {
  /* ground and ink */
  --paper:        #D8DAD2;  /* ground, ~60 % of a view */
  --paper-quiet:  #DEE0D9;  /* behind long text (surfaces/paper-quiet) */
  --peat:         #1D251F;  /* ink and dark surface. On paper 11.1:1 */
  --peat-2:       #2A332C;  /* raised dark surface */
  --moss:         #4F6040;  /* secondary ink: ≥ 16 px bold or ≥ 24 px. On paper 4.8:1 */
  --ink-mute:     #535C4D;  /* captions, meta ≥ 12 px. On paper 4.9:1 */
  --lichen:       #B0BB92;  /* quiet fills, never text */
  --line:         #B9BCB2;  /* hairlines on paper (decorative, not a UI boundary) */
  --line-strong:  #6E7566;  /* control borders: 3.4:1 on paper */

  /* one accent, one meaning: the top 2 % of water */
  --cloudberry:     #E8A020;  /* fills only; on peat 7.1:1; never text on paper (1.6:1) */
  --cloudberry-ink: #7A4E00;  /* cloudberry as small text on paper: 5.1:1 */

  /* the opening: sky is only ever the hole / "nothing" water, never a UI fill */
  --sky:          #DDE3E1;

  /* forecast (map) scale: app states */
  --f-none:  var(--sky);    /* average or below */
  --f-40:    #B6C09A;       /* Top 40 % */
  --f-15:    #7E8E68;       /* Top 15 % */
  --f-5:     #3C4B34;       /* Top 5 % (scale check: graphics/forecast/scale-check.png) */
  --f-2:     var(--cloudberry); /* Top 2 % */

  /* type: max 3 families */
  --font-words: "Newsreader", "Newsreader Variable", Georgia, serif;
  --font-data:  "DM Mono", ui-monospace, "Consolas", monospace;   /* real data only */
  --font-ui:    var(--font-words); /* app controls: test a plain sans in the app screens before adding a third */

  /* type scale (px), 1.25 ratio; site body 18, app body 16, never below 12 */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px; --t-22: 22px;
  --t-28: 28px; --t-36: 36px; --t-48: 48px; --t-64: 64px; --t-96: 96px; --t-160: 160px;
  --lh-tight: 1.05; --lh-head: 1.15; --lh-body: 1.5;
  --track-display: -0.02em;  /* ≥ 48 px */

  /* spacing: 4-based */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* one radius, one shadow: the cell is square; the radius is small and only on controls */
  --radius: 4px;
  --shadow: 0 1px 0 rgba(29, 37, 31, 0.18), 0 6px 18px -10px rgba(29, 37, 31, 0.35);
  --cut-edge: 2px; /* the opening's dark depth line */

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 140ms; --t-med: 260ms; --t-slow: 520ms;
  --cell-step: 40ms; /* stagger when cells step in */

  /* focus: peat ring on paper 11:1, cloudberry ring on peat 7:1 */
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--peat);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; --cell-step: 0ms; }
}