/* ==========================================================================
   exe.cute v3 — design tokens
   Carried over unchanged from v2 (css/styles.css:6-23). The palette, the three
   families and the gutter ARE the brand; v3 changes the machinery, not these.
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --ink: #0b0b0d;
  --ink-2: #101013;
  --bone: #ecebe6;
  --bone-70: rgba(236, 235, 230, 0.7);
  --bone-45: rgba(236, 235, 230, 0.45);
  --bone-25: rgba(236, 235, 230, 0.25);
  --bone-12: rgba(236, 235, 230, 0.12);
  /* 5.41:1 on --ink. The one step between --bone-45 (3.97, fails body text) and --bone-70 (8.27,
     nearly as bright as --bone itself). It exists for the pillars' always-visible base layer,
     which has to be readable on its own and must still read as dimmer than the aperture copy. */
  --bone-55: rgba(236, 235, 230, 0.55);
  /* RESERVED, not used. --brand is the logo's own blue and --ink-2 a lifted ground; nothing on the
     page references either — grep returns only these two declarations. Kept because they are brand
     facts rather than page decisions (a light mode would need both), and deleting them would mean
     re-deriving them from the PNGs. */
  --brand: #194cc2;          /* logo blue */
  --accent: #3d64f5;         /* brand blue lifted for dark backgrounds */

  /* THE ACCENT AT BOTH POLARITIES, because #3d64f5 fails 4.5:1 in BOTH directions — measured, it
     is 4.06:1 as text on --ink and 4.05:1 as a field under --bone. One value cannot serve both, so
     there are two, each the smallest departure from the brand blue that clears the bar.
       --accent-text  5.04:1 on --ink   for accent used as small TEXT
       --accent-deep  5.24:1 under --bone   for accent used as a FIELD
     --accent itself stays exactly as it is: at display sizes it is large text (3:1) and it is what
     the guides, the eyebrow dot and the hero's accent period are drawn in. */
  --accent-text: #5778f3;
  --accent-deep: #3455d0;

  /* ---- type ---- */
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- layout ---- */
  --gutter: clamp(20px, 4.5vw, 72px);
  --bar-h: clamp(56px, 7vh, 84px);       /* height of each chrome bar */

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- the one material: a 4px dot matrix of --ink ------------------------
     Everything on this page either resolves out of this matrix or dissolves
     back into it. --dev-r is the per-element develop radius (0 = absent,
     --dev-full = solid); the screen and aperture properties are written once
     per frame by js/ui/screen.js and by nothing else. */
  --cell: 4px;               /* dot matrix pitch */
  /* --dev-r at which an element is genuinely SOLID. The mask is a circle centred in each --cell
     square, so the last point it has to cover is the cell corner at hypot(2,2) = 2.828px. At the
     2px this started as, the corners never close and every developed element rests as a visible
     4px halftone — fine as texture on 10rem display type, a legibility cost on the studio
     paragraph. 2.9px clears the corner with the 0.6px feather to spare. */
  --dev-full: 2.9px;
  --dev-r: 2.9px;            /* default: solid, so a JS failure leaves text readable */

  --scr: 0;                  /* screen opacity: 0 = field visible, 1 = field behind grain */
  --ax: 50vw;                /* aperture centre x */
  --ay: 50vh;                /* aperture centre y */
  --ar: 0px;                 /* aperture radius */
  --af: clamp(24px, 3.5vw, 64px);  /* aperture feather */
}

/* A light theme would be authored here as :root[data-theme="light"] — deliberately
   not built (see docs/v3-direction.md, open question 4: it is a brand decision,
   and it means a second full colour system including the field shader). */