/* ==========================================================================
   zaq.to — design tokens
   Direction: "Zap". Long becomes short; many become one.

   Three colour jobs, and nothing outside them:
     1. WAYFINDING  — which section am I in?        (--sec-*)
     2. GROUPING    — which folder does this be to? (--fld-*, from Folder.Color)
     3. STATUS      — what state is this in?        (--ok/--warn/--stop, RESERVED)
   Chart series are a fourth, separate set: the brand hues fail a categorical
   palette check on a dark surface, so charts never borrow them. See §Charts.

   Single visual world (dark). Deliberate — this is a night-energy product UI,
   not an omission. Every colour is painted explicitly.
   ========================================================================== */

:root {
  /* ---- ground ------------------------------------------------------------
     Calm neutral slate with a cool bias. Not near-black: a quiet ground is
     what lets the accent hues read at full strength.                       */
  --void:      #14161C;   /* page / app background          */
  --riser:     #1C1F27;   /* raised surface: cards, sheets  */
  --edge:      #2A2E39;   /* borders, hairlines, tracks     */
  --haze:      #8B93A5;   /* muted text                     */
  --flash:     #F4F6FB;   /* primary text                   */

  /* ---- brand spectrum ----------------------------------------------------
     Six hues used for identity and wayfinding ONLY. Never chart series.    */
  --bolt:      #EFFF4F;   /* lime   */
  --plasma:    #FF4D9D;   /* pink   */
  --tide:      #35E0FF;   /* cyan   */
  --surge:     #FF8A3D;   /* orange */
  --vapor:     #A97BFF;   /* violet */
  --acid:      #7CFF6B;   /* green — brand only, NEVER a folder or a status */

  /* ---- 1. wayfinding: one hue per section -------------------------------
     Set --hue on the app shell per route; every accent follows it.         */
  --sec-links:   var(--bolt);
  --sec-pages:   var(--plasma);
  --sec-boards:  var(--tide);
  --sec-shop:    var(--surge);
  --sec-account: var(--vapor);
  --hue: var(--sec-links);

  /* ---- 2. grouping: folder colours ---------------------------------------
     Offered as a PICKER, not a free hex field, so a user can't choose
     something illegible or collide with a status colour. Green is absent
     on purpose — it is reserved for "live".                                */
  --fld-1: #EFFF4F;
  --fld-2: #FF4D9D;
  --fld-3: #35E0FF;
  --fld-4: #FF8A3D;
  --fld-5: #A97BFF;
  --fld-none: #8B93A5;    /* no folder = no colour, shown honestly */

  /* ---- 3. status: RESERVED ----------------------------------------------
     Never a folder hue, never a chart series, always paired with a label.  */
  --ok:   #3FBF7F;        /* live      */
  --warn: #E8A33D;        /* expiring  */
  --stop: #FF7676;        /* expired / destructive */

  /* ---- charts ------------------------------------------------------------
     DERIVED, not the brand spectrum. Validated against --riser in dark mode:
     lightness inside OKLCH L 0.48–0.67, chroma >= 0.10, all-pairs CVD dE >= 8,
     normal-vision floor >= 15, contrast >= 3:1.
     The brand six FAIL that check (L 0.69–0.96; lime vs green dE 3.7 protan).
     Single-series charts may use --hue; categorical charts use these.       */
  --s1: #c93029;
  --s2: #89a200;
  --s3: #007399;
  --s4: #bd5ed2;

  /* ---- type --------------------------------------------------------------
     Display is condensed on purpose: compression lives in the letterforms,
     not only in the motion.                                                */
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --t-hero:  60px;  /* hero metric / landing headline */
  --t-h1:    38px;
  --t-h2:    30px;
  --t-h3:    24px;
  --t-body:  15px;
  --t-small: 13px;
  --t-micro: 11px;  /* mono labels, counts   */
  --t-label: 9.5px; /* uppercase eyebrow     */
  --ls-label: .16em;

  /* ---- shape & depth ---------------------------------------------------- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- motion ------------------------------------------------------------
     One signature (the collapse), reused. Press, never hover — hover does
     not exist on touch.                                                    */
  --snap:  .34s cubic-bezier(.6, -.4, .7, .2);   /* the collapse            */
  --land:  .30s cubic-bezier(.2, 1.4, .4, 1);    /* the arrival             */
  --press: .08s ease;                            /* :active depress         */
  --press-y: 2px;

  /* ---- touch -------------------------------------------------------------
     Minimum target. Anything interactive clears this on a phone.           */
  --tap: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --snap: .01ms; --land: .01ms; --press: .01ms; --press-y: 0px; }
}