/* ==========================================================================
   rdctd theme — design tokens
   Source of truth: brand/04-aboutblank-spec.md + brand/01-naming-system.md.
   Nothing downstream hard-codes a colour, size, or timing. Ever.
   ========================================================================== */

:root {
  /* colour — no interface accent. Colour arrives through garments only. */
  --ink:           #000000;
  --paper:         #ffffff;
  --ink-2:         #8c8c8c;   /* meta text, machine keys, disabled          */
  --hairline:      #d9d9d9;   /* the ONLY border colour                     */
  --placeholder:   #fafafa;   /* image ground before load                   */
  --error:         #b50000;   /* form validation ONLY. never decorative.    */

  /* type — two families, that is the entire system */
  --font-text: 'Inter', system-ui, sans-serif;
  --font-mono: 'UNMono', ui-monospace, 'Cascadia Mono', monospace;

  /* Display. Fluid rather than stepped, because the only thing wearing it is a
     hero headline over a full-bleed photograph, where a hard breakpoint jump is
     visible. It was previously 5.6rem/9.4rem and used by nothing — .state-body
     h1 carried this exact clamp inline, so the scale's largest size was a
     decoration. Same rendered values; now there is one place to change it. */
  --text-xl: clamp(3.2rem, 7vw, 6.4rem);
  /* The drop clock. Its own fluid step because it is neither display nor body —
     it is a fixed-width machine readout that has to stay on one line at 320px
     and still carry a full-bleed hero at 1440. Extracted for the same reason
     --text-xl was: it was a bare clamp() inline in main.css, which is how a
     scale ends up with sizes that live nowhere. */
  --text-clock: clamp(2rem, 4vw, 3.2rem);
  --text-l:  2.2rem;
  --text-m:  1.5rem;
  --text-s:  1.3rem;
  --text-xs: 1.1rem;

  /* tracking — negative on display, EXACTLY zero at small sizes.
     Positive tracking is not a typographic option in this system. Widely-set
     type is a different brand's voice and there is no headline, label, nav item
     or caption anywhere that gets it.

     ONE EXCEPTION, and it is not typography — it is a legibility affordance.
     The clearance-code field spaces its characters so a code can be read back
     and checked while being typed from a phone screen, which is the only place
     on this site where someone transcribes a string by hand and a single wrong
     character locks them out. The placeholder is eight em-dashes standing in
     for empty slots and takes the same value, so the dashes sit on the same
     rhythm as the characters that replace them.

     It is a token rather than a loose value precisely so it stays the one
     exception. If a second use ever appears, that is the signal the rule is
     being eroded — not that the rule needs another carve-out. */
  --track-display: -0.01em;
  --track-body:    -0.02em;
  --track-small:    0;
  --track-code:     0.14em;   /* clearance-code entry ONLY — see above */

  /* spacing — the signature asymmetry: near-zero horizontal gutters,
     an order of magnitude more vertical rest. */
  --gap-card:    0.25rem;
  --gap-caption: 0.6rem;
  --gap-row:     3rem;
  /* THE PAGE EDGE. One value, used by every top-level surface — header, hero
     type, catalogue, footer — so they share a left edge.
     Before this there were three: the header sat at 30px inside a 1320px cap,
     the catalogue ran full-bleed at 5px, and hero type at 60px. Nothing lined
     up with anything, and above 1320px they diverged further.
     NOT the same as --gap-card. The spec's 0.25-0.5rem is the COLUMN gap —
     images nearly touching EACH OTHER is the signature — not the page margin.
     Setting the page edge to 5px cramped the header and the hero headline
     against the viewport for no gain.

     MIND THE ROOT CLAMP. html is font-size: clamp(10px, 0.7vw, 12px), so 1rem
     is 10px on every viewport below 1714px — these rem values do not scale
     with the window the way they look like they do. 3rem read as "roughly a
     finger's width" and was in fact 30px, which on a full-bleed hero put the
     wordmark and the basket count hard against the frame. */
  --edge:        2rem;
  /* --gutter was a SECOND page-edge token at a different value. Its only live
     consumers were .legal, .cart-page and .cart-empty, all of which sit inside
     .wrap and were therefore adding it ON TOP of --edge — so the one surface
     that is pure body copy sat at a different inset from everything else.
     Removed rather than reconciled: two tokens for one measurement is how the
     three-different-left-edges problem started. */
  --space-s:     4rem;
  --space-m:     6rem;
  /* Between SECTIONS specifically. 04-aboutblank-spec measures their section
     breaks at 120-144px — the "silence" half of "dense bands separated by
     silence". --space-m (60px) is half that and was being used for section
     breaks, which quietly halved the signature. */
  --space-section: 12rem;
  --space-l:     8rem;

  --nav-h:  4rem;
  --radius: 0;                /* nothing is rounded. */

  --t-fast: 75ms cubic-bezier(.165, .84, .44, 1);
  --t-decrypt: 140ms cubic-bezier(.165, .84, .44, 1);
  /* EVERY panel that travels — the basket drawer and the quick-add panel both.
     --t-fast is a state change (a colour, an opacity); at 75ms a sliding panel
     reads as a jump-cut rather than a movement.
     One token, not two. The basket drawer previously hard-coded 220ms in two
     places and its JS waited 240ms for it, so one animation was described by
     three different numbers and none of them referenced the others. */
  --t-drawer: 260ms cubic-bezier(.165, .84, .44, 1);

  /* How far the quick-add control sits off the bottom edge of the image. It was
     flush, and a square button hard against the frame edge reads as clipped
     rather than placed. */
  --qb-inset: 1.6rem;
}

@media (min-width: 48rem) {
  :root {
    --text-l:  2.8rem;
    --text-m:  1.7rem;
    --text-s:  1.4rem;
    --text-xs: 1.2rem;
    --gap-card: 0.5rem;
    --edge:     4.8rem;
    --space-l:  12rem;
    --space-section: 14.4rem;
    --nav-h:    6rem;
  }
}