/* GAID design tokens. Pronounced "guide".
   Direction (11 October 2026): the talking drum and the danfo. A gángan is
   the Yoruba drum built to speak words — GAID's mark. Danfo yellow and black
   are Lagos's buses. On a gallery-wall white, because the screen beside a
   painting should disappear into the wall, and a work is never on black.
   Every colour, size, space, radius and duration on every GAID screen comes
   from this file. A page that invents its own value is a bug: test/design.test.js
   fails on it. Full guide: docs/design-system.md. Live: /design. */

:root{
  /* ---------------------------------------------------------------- colour: palette */
  --wall:     #F4F4F1;  /* the gallery wall — GAID's ground */
  --paper:    #FFFFFF;  /* a card on the wall */
  --shelf:    #E9E9E4;  /* raised, pressed, hover */
  --ink:      #141412;  /* text; the danfo's black stripes; every edge of yellow (16.7:1) */
  --ink-2:    #4D4D48;  /* quiet text (7.7:1) */
  --cord:     #6E6E68;  /* control edges — a drum's cords (4.7:1) */
  --hairline: #D5D5CE;  /* dividers only — 1.3:1, never a control's edge */
  --danfo:    #F7C600;  /* danfo yellow — the voice: talk, ▶. Always ringed in ink: alone on white it is 1.5:1 */
  --mount:    #D9D8D3;  /* the neutral plate under every work (ISO 3664 asks for a neutral surround) */
  --ok:       #17703D;  /* done (5.6:1) */
  --alert:    #B3261E;  /* failed (5.9:1) */

  /* ---------------------------------------------------------------- colour: roles */
  --bg:        var(--wall);
  --surface:   var(--paper);
  --raised:    var(--shelf);
  --text:      var(--ink);
  --text-2:    var(--ink-2);
  --line:      var(--hairline);
  --edge:      var(--cord);
  --accent:    var(--danfo);
  --on-accent: var(--ink);
  --ring:      var(--ink);
  --focus:     var(--ink);
  color-scheme: light;

  /* ---------------------------------------------------------------- type */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Noto Sans", system-ui, sans-serif;
  --font-body:    "Work Sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The scale. Six steps, no others. rem, so the TV scales it by its root size. */
  --t-1: .8125rem;   /* 13 — labels, captions, legal */
  --t-2: 1rem;       /* 16 — body, buttons */
  --t-3: 1.25rem;    /* 20 — the answer */
  --t-4: 1.625rem;   /* 26 — panel heads */
  --t-5: 2.25rem;    /* 36 — titles */
  --t-6: 3.5rem;     /* 56 — TV title, logo lockups */
  --w-body: 400;
  --w-strong: 600;
  --w-display: 800;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --track-label: .08em;
  --track-display: -.02em;
  --measure: 60ch;

  /* ---------------------------------------------------------------- space (4-based) */
  --s-1: .25rem;  /*  4 */
  --s-2: .5rem;   /*  8 */
  --s-3: .75rem;  /* 12 */
  --s-4: 1rem;    /* 16 */
  --s-5: 1.5rem;  /* 24 */
  --s-6: 2rem;    /* 32 */
  --s-7: 3rem;    /* 48 */
  --gut: 16px;    /* side gutter, phone */
  --page-max: 68rem;  /* widest a phone page's column gets */
  --thumb-min: 8.5rem;/* narrowest a work card gets */
  --room-min: 11rem;  /* narrowest a room card on the TV gets */

  /* ---------------------------------------------------------------- shape */
  --r-0: 0;        /* mounts and works: square, like a mat */
  --r-1: 6px;      /* buttons, fields, cards */
  --r-round: 999px;/* the dot, chips, the app icon's mark */
  --b-1: 1px;
  --b-2: 2px;
  --b-focus: 3px;
  --tap: 44px;     /* every control at least this, both ways */
  --dot: 1.25rem;  /* the adire dot in the logo and the voice signal */

  /* ---------------------------------------------------------------- motion */
  --m-fast: 150ms;
  --m-base: 300ms;
  --m-slow: 600ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --eyes-up: .18;  /* how faint the phone goes while GAID speaks: look at the work, not the screen */

  /* ---------------------------------------------------------------- texture */
  /* The danfo's two black stripes, as a rule under a heading or a plate. */
  --stripes: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 3px no-repeat,
             linear-gradient(var(--ink), var(--ink)) 0 7px / 100% 3px no-repeat;
  --adire: none;            /* retired with the indigo; kept so nothing breaks */
  --adire-size: auto;
}

@media (min-width: 700px){ :root{ --gut: 28px; } }

/* Reduced motion: every duration is zero, so nothing written against the tokens moves. */
@media (prefers-reduced-motion: reduce){
  :root{ --m-fast: 0ms; --m-base: 0ms; --m-slow: 0ms; }
}