/* Kuiri design tokens: the single source of colour, type, shape, motion and
   layering. docs/design.md explains them; nothing defines a colour, a size
   or a layer anywhere else.

   Four colours, a point, and two reveal colours. Charcoal and olive are the
   stage, cream is the ink, one yellow says "this", terracotta belongs to the
   paper pages, and a single red point means live; at the reveal, and only
   there, green is the right answer and red your own wrong pick. Every other
   tone is one of these at an opacity. Every page loads this file and names
   these tokens; src/theme/raw-colours.test.ts fails on a raw colour anywhere
   else. Swatch words in the comments are Nheengatu colour words, sourced
   per word in design.md section 2 and pending a speaker's review; they never
   appear in the product. */
:root {
  --canvas: #171916;                   /* pixuna: the stage; every page's ground */
  --surface: #252923;                  /* a tone of the stage: sheets, menus, the post-purchase sheet */
  --raised: #353A32;                   /* olive: rows and controls on a sheet; the MOD tag */
  --ink: #F5F3E9;                      /* murutinga: text on dark; the paper pages' ground */
  --ink-soft: rgba(245,243,233,.8);    /* secondary text over video (4.9:1 on the plate); a wrong answer's word */
  --ink-dim: rgba(245,243,233,.55);    /* inactive rows only, never text that must be read (3.2:1 on the plate) */
  --signal: #EBD55D;                   /* tawá: the one action; the marker; the winner's slab (the reveal's right answer is --right) */
  --on-signal: #171916;
  --live: #FF4B3E;                     /* piranga: the live point, and nothing else at rest; a point beside urgency */
  --clay: #AA6342;                     /* terracotta: paper pages only — rules, blocks, illustration, large headings */
  --clay-deep: #8F4326;                /* small terracotta text on paper (6.3:1) */

  /* The reveal in colour (build-plan 13.62; D8, approved 2026-10-01). The two
     colours past the four and the point, used only on answer rows and tiles
     at the reveal, never anywhere else. Colour never works alone: the tick,
     the cross and the words stay. */
  --right: #7AB05A;                    /* the right answer's bed at the reveal, the same for everyone; charcoal text 6.90:1 */
  --on-right: #171916;
  --wrong: #FF4B3E;                    /* your own wrong pick's bed at the reveal; the live point's red, a second job; charcoal text 5.33:1 */
  --on-wrong: #171916;

  /* 049 (Gravação e cortes, 2026-10-22): Admin's recording timeline, the one place with five kinds of moment side by
     side. The other four are --signal (marked in the Sala), --ink-soft (a reveal), --live (a winner or a strong
     reveal) and --right (a lot sold). */
  --mark-chat: #7FA7E0;                /* a burst of chat on that timeline (pages/desk-recordings.js), and nothing else */

  /* Tones by job (T37). Each is one of the colours above at an opacity, so
     changing that colour changes these too. */
  --line: color-mix(in srgb, var(--ink) 14%, transparent);      /* a hairline: a field's or a card's edge, a divider */
  --scrim: color-mix(in srgb, var(--canvas) 72%, transparent);  /* darkens a bright camera behind words with no plate (the booth's top and bottom, the live page's veil) */

  /* Over video the surface is the picture, darkened. One filter per region. */
  --plate: saturate(1.25) brightness(.34);
  --plate-deep: saturate(1.2) brightness(.26);        /* a separate region only (the hammer row) */
  --deepen: rgba(23,25,22,.24);                        /* the question rail inside the now card: a flat overlay */
  --plate-fill: transparent;                           /* becomes a solid bed where filters are off */
  --plate-rim: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.30);
  --text-rim: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(0,0,0,.85), 1px 0 0 rgba(0,0,0,.85), -1px 0 0 rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6);
  --icon-rim: drop-shadow(0 0 1px rgba(0,0,0,.85)) drop-shadow(0 0 5px rgba(0,0,0,.45));  /* --text-rim for a drawn mark over the video (the wordmark's logo, 2026-10-15) */
  --band: rgba(0,0,0,.75);                             /* the composer band and the cue */
  --chat-bed: rgba(0,0,0,.7);                          /* chat lines: flat, no filter; 70 % so the message at --ink-soft holds 4.5:1 on a white frame */
  /* Layers read as layers (design.md 2, 2026-10-08): a sheet, drawer or dialog stands apart from what it covers
     in three ways at once, the page dimmed behind it, its own opaque fill one step above a card, and a lit edge
     with a shadow cast up. Measured: the sheet 1.39:1 against a dimmed card, its edge 3.4:1. */
  --sheet: #2B3029;                                    /* a sheet's fill: opaque, between a card (--surface) and a control on it (--raised) */
  --sheet-edge: color-mix(in srgb, var(--ink) 30%, transparent);   /* its lit top and sides */
  --sheet-lift: 0 -18px 44px rgba(0,0,0,.55);         /* the shadow it casts up */
  --sheet-scrim: rgba(0,0,0,.55);                      /* the page dimmed behind any open sheet */
  --sheet-scrim-live: rgba(0,0,0,.40);                 /* over a live picture: the host is still seen */
  --glass: rgba(37,41,35,.90);                         /* a card over the picture (the live's own cards): the surface at 90 % with the one blur */
  --sheet-blur: blur(26px);                            /* the one blur allowed: glass only */
  --field-edge: color-mix(in srgb, var(--ink) 40%, transparent);   /* a field's outline: 3.3:1 on a sheet, 3.5:1 on its own fill */
  --placeholder: color-mix(in srgb, var(--ink) 62%, transparent);  /* a field's hint: 6.7:1 */
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);

  /* Type. The live screen loads no web font; the mark is inline SVG. */
  --display: "Gabarito", "Gabarito Fallback", -apple-system, "Helvetica Neue", Roboto, system-ui, sans-serif;
  --ui: -apple-system, "Helvetica Neue", Roboto, system-ui, sans-serif;
  --fs-question: 20px; --lh-question: 26px;
  --fs-action: 16px;   --lh-action: 20px;
  --fs-body: 14px;     --lh-body: 20px;
  --fs-chat: 12px;     --lh-chat: 16px;
  --fs-label: 11px;    /* chips, rail labels, tags: nothing the audience reads is smaller */
  --fs-input: 16px;    /* never smaller: iOS zooms */

  /* Sizes that are the contract */
  --h-chip: 26px; --glyph-chip: 14px;
  --h-rail: 34px; --glyph-rail: 18px;
  --glyph: 22px;
  --h-row: 46px;   /* an answer */
  --h-btn: 44px;
  --h-band: 32px;  /* the composer band and the cue */
  --h-hammer: 36px;
  --h-lot: 150px; --h-featured: 96px; --h-lobby: 64px;
  --av-s: 14px; --av-m: 20px; --av-l: 44px; --av-xl: 88px;
  --hit: 44px;
  --pip-w: 96px; --pip-h: 170px;

  /* Shape and space */
  --r-row: 12px; --r-card: 20px; --r-sheet: 24px; --r-pill: 999px;
  --space: 8px;

  /* Motion */
  --t-press: 120ms; --t-card: 220ms; --t-bar: 380ms;

  /* Layers */
  --z-stage: 0; --z-veil: 1; --z-chat: 2; --z-now: 3; --z-rail: 4; --z-top: 5;
  --z-sheet: 6; --z-pip: 7; --z-toast: 8; --z-layer: 9; --z-alerts: 10;

  /* The keyboard, while someone types (public/keyboard.js writes these on <html>): how much of the
     page's bottom it covers, the height still visible, how far the phone panned the page up. */
  --kb: 0px; --vvh: 100dvh; --vvt: 0px;

  color-scheme: dark;
}

/* Every element made of the plate writes these two lines and nothing else. */
.plate { background: var(--plate-fill); backdrop-filter: var(--plate); -webkit-backdrop-filter: var(--plate); box-shadow: var(--plate-rim); }
.plate-deep { background: var(--plate-fill); backdrop-filter: var(--plate-deep); -webkit-backdrop-filter: var(--plate-deep); box-shadow: var(--plate-rim); }
/* A 44 px target around a smaller glyph. */
.hit { position: relative; }
.hit::before { content: ""; position: absolute; inset: calc((var(--hit) - 100%) / -2); }
:focus-visible { outline: none; box-shadow: var(--focus); }
/* A field's hint reads (design.md 2, Layers read as layers: 6.7:1); Firefox's own 54 % opacity goes. */
::placeholder { color: var(--placeholder); opacity: 1; }
/* A checkbox drawn by hand, the same on every phone (2026-10-07: iOS drew the native one beside *Tenho 18 anos
   ou mais* as a dark blob): an ink outline, empty until ticked, then ink with a check in the ground's colour.
   The page gives its size; never yellow. */
.kbox { appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center; box-sizing: border-box;
  width: 22px; height: 22px; margin: 0; padding: 0; flex: none; border: 2px solid var(--ink); border-radius: 6px;
  background: transparent; cursor: pointer; transition: background-color var(--t-press, 120ms) ease; }
.kbox::before { content: ""; width: 62%; height: 62%; background: var(--canvas); transform: scale(0);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transition: transform var(--t-press, 120ms) ease-out; }
.kbox:checked { background: var(--ink); }
.kbox:checked::before { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-card: 0ms; --t-bar: 0ms; }
}
@supports not (backdrop-filter: brightness(.4)) {
  :root { --plate-fill: rgba(23,25,22,.80); --plate: none; --plate-deep: none; }
}
@media (prefers-contrast: more) {
  :root { --plate: saturate(1.1) brightness(.22); --plate-deep: brightness(.16); --plate-rim: 0 0 0 1px rgba(255,255,255,.4); --band: rgba(0,0,0,.9); --chat-bed: rgba(0,0,0,.85); --ink-dim: rgba(245,243,233,.75); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --plate-fill: rgba(23,25,22,.92); --plate: none; --plate-deep: none; --glass: #252923; --sheet-blur: none; --band: #0f110f; --chat-bed: rgba(0,0,0,.92); }
}
@media (forced-colors: active) {
  .plate, .plate-deep { border: 1px solid CanvasText; box-shadow: none; }
  .picked, .correct { outline: 2px solid Highlight; }
  /* Forced colours strip the reveal's beds: the right answer a solid outline, your wrong pick a dashed one. */
  .wrong { outline: 2px dashed CanvasText; }
}

/* Paper pages: the order page, the account, the result, discovery. */
.paper {
  --canvas: #F5F3E9; --surface: #FFFFFF; --raised: #EFEBDD;
  --ink: #171916; --ink-soft: rgba(23,25,22,.8); --ink-dim: rgba(23,25,22,.65);
  --live: #C8281D;
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);
  /* A custom property resolves where it is declared, so the tones by job are
     declared again to follow the paper's ink and canvas. */
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --scrim: color-mix(in srgb, var(--canvas) 72%, transparent);
  /* A sheet on paper: white over cream, the same three cues in the paper's tones. */
  --sheet: #FFFFFF;
  --sheet-edge: color-mix(in srgb, var(--ink) 18%, transparent);
  --sheet-lift: 0 -14px 36px rgba(23,25,22,.18);
  --sheet-scrim: rgba(23,25,22,.35);
  --field-edge: color-mix(in srgb, var(--ink) 40%, transparent);
  --placeholder: color-mix(in srgb, var(--ink) 62%, transparent);
  color-scheme: light;
}