/* =============================================================================
   Minnow — shared animation substrate: DESIGN TOKENS
   -----------------------------------------------------------------------------
   One source of truth for every scene's colour, type, geometry, and motion.
   Constant tokens live on :root. The three background-dependent tokens
   (--canvas, --structure, --node-edge) are rebound by the .bg-abyss / .bg-clear
   scope wrappers — wrap each scene's root in one of them.

   Phase 1 builds only this substrate. No scene consumes it yet.

   Tokens marked [+] are NOT in the original contract list: the contract
   specifies the behaviour but omits a value, so a token is introduced here and
   flagged for review. Everything else matches the agreed contract values.
   ========================================================================== */

:root {
  /* ---- palette (constant) ------------------------------------------------ */
  --color-abyss:             #124B4B;
  --color-clear:             #F2F6F6;
  --color-mint:              #67F0BA;
  --color-exposure-moderate: #FFC300;
  --color-exposure-high:     #F85E3B;
  --color-ink:               #031C19;   /* deep near-black teal — used (with transparency) for tag backings */

  /* ---- type: Inter Light, ALL CAPS, 6% tracking, one size ----------------
     Label size in scene user-units (SVG <text> scales with each scene's viewBox).
     Hierarchy comes from opacity and position, never from a second size. */
  --type-family:    "Inter", sans-serif;
  --type-weight:    300;            /* Light */
  --type-weight-strong: 600;        /* Semi Bold — emphasis (e.g. exposure value), used sparingly */
  --type-transform: uppercase;
  --type-tracking:  0.06em;         /* 6% */
  --type-size:      8px;

  /* ---- structure: grid / lines / region outlines / tag strokes / text ---- */
  --grid-opacity:           0.08;
  --grid-cell:              80;     /* even square cell, identical in every scene */
  --grid-stroke:            0.5;    /* [+] grid rule weight (contract gave none)  */
  --line-opacity:           0.5;
  --line-stroke:            1.5;    /* [+] connector weight (contract gave none)  */
  --region-context-opacity: 0.45;
  --region-context-dash:    4 4;
  --region-context-stroke:  1;
  --region-contour-opacity: 0.2;    /* [+] solid topographic contour lines (no dash); via
                                           stroke-opacity so it composes with the fade verb */
  --region-exposed-stroke:  2;
  --exposure-fill-opacity:  0.07;   /* ceiling — never above 0.08 */
  --region-field-opacity:   0.12;   /* [+] sanctioned exception to "no area fills":
                                           filled pressure/exposure-area blobs
                                           (structure hue, no stroke) */
  --tag-fill-opacity:       0.8;    /* [+] sanctioned exception to "no area fills":
                                           a backing behind tag pills for
                                           label readability over busy scenes */
  --tag-stroke-opacity:     0.18;   /* [+] faint tag outline */
  --tag-fill:               var(--color-ink);  /* [+] pill backing; rebound per bg scope
                                           so the dark ink backing on abyss flips to a
                                           light chip on clear (dark text needs it) */

  /* ---- motion ------------------------------------------------------------ */
  --reveal-fade-duration: 0.6s;
  --reveal-stagger:       0.12s;
  --reveal-rise:          28px;     /* [+] tuned slide-up kept from live .reveal;
                                           set to 0 for the contract's pure-opacity fade */
  --draw-duration:        0.6s;     /* [+] stroke draw-on; overridable per scene
                                           (e.g. the hero rivers want a longer draw) */
}

/* ---- background scopes -----------------------------------------------------
   Rebind the three background-dependent tokens. Wrap a scene root in .bg-abyss
   (dark scenes) or .bg-clear (light scenes).

   --node-edge: on abyss it is `currentColor`, so each node's ring inherits the
   node's own fill hue (the hue is set per node via `color`). On clear it is
   forced to abyss, because mint / yellow / red cores all wash out on light grey
   and need an abyss edge to read.
   --------------------------------------------------------------------------- */
.bg-abyss {
  --canvas:    var(--color-abyss);
  --structure: var(--color-mint);
  --node-edge: currentColor;
  --tag-fill:  var(--color-ink);          /* dark ink chip; label is mint --structure */
}
.bg-clear {
  --canvas:    var(--color-clear);
  --structure: var(--color-abyss);
  --node-edge: var(--color-abyss);
  --tag-fill:  #FFFFFF;                    /* light chip so the abyss --structure label reads */
}