/* ============================================================================
   UNIÓN , tokens. Lane F owns this file. Nobody else edits it.

   THIS IS THE ONLY FILE IN THE SYSTEM ALLOWED TO CONTAIN A HEX, A FONT NAME,
   AN EASING CURVE OR A DURATION. Everything else references a var().

   ONE documented exception, so a grep does not report it as a breach: a mask
   gradient uses `#000` and `#0000` as its OPAQUE and TRANSPARENT stops. Those are
   alpha stencils, not colour; nothing in the system is ever painted with them.
   They appear only in the edge fades (`.pattern-slot`, `.rv--fade-*`, and
   UNION.river's `fade` option).
   If your lane needs one that is not here, define it in your lane css under a
   comment /* PROPOSED TOKEN *​/ and list it in your evidence doc. The planner merges.

   Breakpoints (comments, because a custom property cannot be used in a media
   query): 390 phone · 768 tablet · 1100 sidebar threshold · 1440 desktop shot width.
   ============================================================================ */

:root{

  /* ---- 1. COLOUR. Five. No tints, no others. Never #000, never white. ---- */
  --pink:#de6188;
  --coral:#f38968;
  --yellow:#f9d273;
  --cream:#fcf6eb;
  --black:#291b10;

  /* hairlines only: black at 25% alpha. Not a sixth colour, a rule weight. */
  --hairline:rgba(41,27,16,.25);
  --hairline-on-dark:rgba(252,246,235,.28);
  /* DISABLED. Never opacity on a black slab: black at 45% over cream is GREY, which is not one
     of the five. A disabled control drops its fill, keeps a hairline edge, and its ink goes to
     the hairline. Coloured fills may fade (pink at 45% over cream is still pink). */
  --disabled-ink:var(--hairline);
  --disabled-edge:var(--hairline);
  --disabled-fade:.45;

  /* ---- 2. SEMANTIC. What a colour is FOR. Compose from these, not the raw five. ---- */
  --ground:var(--cream);          /* the page */
  --ink:var(--black);             /* text on the ground */
  --ground-invert:var(--black);   /* the slab */
  --ink-invert:var(--cream);      /* text on the slab */
  --primary:var(--pink);          /* the CTA, the label bar, the live rung */
  --care:var(--yellow);           /* welfare and safety: black on yellow, brand stepped back */

  --stage-main:var(--pink);
  --stage-grove:var(--coral);
  --stage-corner:var(--yellow);
  --stage:var(--stage-main);      /* default; [data-stage] overrides it below */

  /* Cream on pink and cream on coral are IN the system: Louis uses them on the
     stack logo, the tote and the stickers, and they look right. They are DISPLAY
     pairs. Measured 3.16:1 and 2.27:1, so they carry marks and large bold type
     only, never information someone needs (times, prices, directions, welfare). */
  --on-pink-display:var(--cream);
  --on-coral-display:var(--cream);

  /* ---- 3. TYPE. Archivo variable only. wdth 62..125, wght 100..900, latin-ext.
     NEVER "Archivo Expanded" as a family: width is an axis, set by font-stretch. ---- */
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wdth-condensed:62%;           /* every display voice */
  --wdth-wide:125%;               /* the SET TIMES headline only */

  --size-mega:clamp(72px,14vw,220px);
  --size-display:clamp(44px,9vw,150px);
  --size-head:clamp(26px,3.4vw,52px);
  --size-title:22px;
  --size-wide:clamp(28px,5vw,84px);
  --size-micro:11px;
  --size-body:17px;
  --size-small:14px;

  --lh-mega:.82; --lh-display:.85; --lh-head:.9; --lh-title:1; --lh-body:1.55;
  --track-micro:.18em;

  /* ---- 4. SPACE ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --gutter:clamp(16px,4vw,56px);

  /* ---- 5. SHAPE. Slabs, labels, totem bars are SQUARE. Only two things round. ---- */
  /* MEASURED off the starred builds, 20 Sep: the stub is SQUARE too. Almost
     everything in this system has square corners; only the ribbon's own cap, the
     sticker's die cut and the one pill are round. */
  --radius-slab:0;                /* slab, label, totem bar, stub, stage column */
  --radius-card:10px;             /* RESERVED. Nothing uses this yet; a soft card is
                                     not a shape the mockups have. */
  --radius-round:999px;           /* ribbon cap, sticker, the ONE pill */

  /* ---- 6. RULE + FOCUS ---- */
  --rule:2px;                     /* the standard black rule */
  --rule-heavy:3px;               /* a slab's own border */
  --focus-width:3px;
  --focus-offset:3px;
  --focus-colour:var(--black);
  --focus-colour-on-dark:var(--yellow);
  --tap-min:44px;                 /* minimum target at 390 */

  /* ---- 7. MOTION. One verb per component, chosen because the object does that.
     Each verb has an ease token and a duration token. No fade-in on everything. ---- */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);   /* the bubble lettering's squash */
  --ease-out:cubic-bezier(.22,1,.36,1);         /* the drawn stroke */
  --ease-in:cubic-bezier(.55,0,.35,1);          /* leaving */
  --ease-linear:linear;                         /* marquees only */

  --dur-bounce:420ms;   --ease-verb-bounce:var(--ease-bounce);
  --dur-squash:360ms;   --ease-verb-squash:var(--ease-bounce);
  --dur-tear:520ms;     --ease-verb-tear:var(--ease-out);
  --dur-stamp:260ms;    --ease-verb-stamp:var(--ease-bounce);
  --dur-draw:700ms;     --ease-verb-draw:var(--ease-out);
  --dur-flood:380ms;    --ease-verb-flood:var(--ease-out);
  --dur-drop:480ms;     --ease-verb-drop:var(--ease-bounce);
  --dur-swing:900ms;    --ease-verb-swing:var(--ease-bounce);

  /* simple CSS state changes, not a verb */
  --dur-state:200ms;
  --dur-marquee:110s;             /* marquees run SLOW: 90 to 120s a loop */

  /* ---- 8. Z LAYERS. A component may use these; it may not invent one. ---- */
  --z-river:0;                    /* the pattern layer, always behind */
  --z-body:1;                     /* the component's own content */
  --z-raise:5;                    /* a torn stub, a stamped label, a sticky head */
  --z-overlay:20;                 /* a toast, an alert bar */
  --z-chrome:50;                  /* the documentation sidebar only */

  /* ---- 9. PATTERN INK BUDGET. Documented as properties so a lane can read the
     rule instead of guessing it. A river is a BAND or a ZONE, never a field,
     never a swatch box, never behind a word. Hold it back further than feels right. ---- */
  --ink-budget-min:7%;            /* below this the brand has been dodged */
  --ink-budget-max:20%;           /* above this Louis has called it too strong */
  --river-stroke-min:9%;          /* stroke width as a fraction of its HOST's width */
  --river-stroke-max:14%;
  --river-count-min:12;           /* fewer reads as blobs */
  --river-count-max:28;           /* more reads as confetti */
}

/* ---- The stage attribute. Anything inside inherits --stage. ---- */
[data-stage="main"]{--stage:var(--stage-main)}
[data-stage="grove"]{--stage:var(--stage-grove)}
[data-stage="corner"]{--stage:var(--stage-corner)}

/* ---- Ground flips. Put these on a wrapper, never on a component. ---- */
.on-dark{--ground:var(--black);--ink:var(--cream);--focus-colour:var(--focus-colour-on-dark)}
.on-pink{--ground:var(--pink);--ink:var(--black)}
.on-coral{--ground:var(--coral);--ink:var(--black)}
.on-yellow{--ground:var(--yellow);--ink:var(--black)}