/* ============================================================
   tokens.css — landing-page.md PART IV § C2
   Token NAMES + the shared values that do not vary by skin.

   THE BINDING RULE (C2): index.html, layout.css and page.js may
   reference ONLY the token names below. A literal colour, radius,
   font stack or cubic-bezier anywhere outside skin-acid.css /
   skin-pop.css is a build failure (build.mjs step 6 greps for it).
   If a skin needs a value this file lacks, THIS FILE IS WRONG:
   add the token here and to BOTH skins in the same commit.

   Skin-varying tokens — defined in full by BOTH skin files, never
   inherited between them:
     --ground --ground-2 --panel --rule --stroke-w --image-scrim
     --ink --ink-dim --ghost --ghost-bg --ghost-rule
     --accent --accent-soft --accent-2 --accent-2-soft --accent-3
     --tok-ink --tok-ink-bg --tok-ink-rule
     --radius-card --radius-pill
     --font-display --font-body --font-label
     --ease
   --tok-ink ADDED 27 Aug 2026, by C2's own procedure ("if a skin needs a
   value this table lacks, the table is wrong: add the token to
   tokens.css and to BOTH skins in the same commit").

   WHY: C2's table names --accent as the "inked (real) ingredient", but
   C2's own P5 note measures the ACID decode's ink ratio against
   --accent-2 (5.77:1), and the ACID draft sets .tok.lit to --hot
   (= --accent-2). Those cannot both be one token name across two skins.
   Measured on the built page: with ink bound to --accent-2, POP's inked
   chips computed 2.49:1 on their own fill — P5's defect class exactly,
   on the ten tokens that carry the argument, in the half P5's audit did
   not cover. --tok-ink resolves it with the values C2 already lists:
   ACID #ff3d8e (5.77:1), POP #2B3BFF (C2's own "inked ingredient" value
   for POP). Measure a token against the surface it is drawn on.
   ============================================================ */

:root {
  /* spacing scale — structural, identical in both skins */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* the page gutter and the measure */
  --gutter: 20px;
  --measure: 1060px;
  --measure-text: 34ch;

  /* motion durations — § C4 / PART VII constraint 2:
     the decode runs off the load clock and completes in ~2s */
  --dur-decode: 2000ms;
  --dur-tok: 450ms;
  --dur-enter: 600ms;
  --dur-ui: 180ms;

  /* stacking */
  --z-grain: 9;
  --z-hud: 10;
  --z-bar: 11;

  /* the decode counter: reserved width so the per-frame text write
     in page.js frame() cannot trigger reflow (§ C4 rule 6) */
  --counter-ch: 2ch;

  /* Chorus placeholder geometry. These are SHAPE, not style — a head is
     the same shape in both skins — so they are shared non-colour values
     and live here, which is what this file is for. The skins colour
     them; neither changes their outline. */
  --silhouette-head:  50% 50% 44% 44%;
  /* the face-light catch on the synth head — a circle, skin-invariant */
  --radius-circle:    50%;
  --silhouette-torso: 48% 48% 12% 12% / 70% 70% 8% 8%;
}

/* Reduced motion and reduced data are not preferences here — they are
   the same final-state code path the page ships by default (§ C4 rule 2,
   Part II Web integration #5). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-decode: 0ms;
    --dur-tok: 0ms;
    --dur-enter: 0ms;
    --dur-ui: 0ms;
  }
}

/* ============================================================
   doc.css — /support and /p/<slug>.

   These are REFERENCE DOCUMENTS, not the pitch (§ D2): no CTA stack,
   no confession, no scroll choreography. They therefore ship their own
   small stylesheet instead of the page's — inlining layout.css on a
   static table page costs 19 kB to style a hero that is not there.
   Tokens only, same binding rule as layout.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--ground); }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: var(--stroke-w) solid var(--ink); outline-offset: 3px; }

h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.05;
  text-wrap: balance;
}

.doc { max-width: 44rem; padding-block: clamp(4rem, 14vh, 8rem); }
.doc h1 { font-size: clamp(1.8rem, 7vw, 3rem); margin-bottom: var(--sp-5); }
.doc h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  line-height: 1.15;
  margin: var(--sp-6) 0 var(--sp-3);
}
.doc p { margin-bottom: var(--sp-4); }
.doc a { color: var(--accent); }
.doc .answer { font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
.doc .doc-meta {
  margin-top: calc(var(--sp-3) * -1);
  color: var(--ink-dim);
  font-family: var(--font-label);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.doc ul { margin: 0 0 var(--sp-4) var(--sp-5); }
.doc li { margin-bottom: var(--sp-2); padding-left: var(--sp-1); }
.doc address { margin-bottom: var(--sp-5); color: var(--ink-dim); font-style: normal; }

.ing-table-wrap { overflow-x: auto; margin-block: var(--sp-6); }
.ing-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ing-table th, .ing-table td {
  text-align: left; vertical-align: top;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--stroke-w) solid var(--rule);
  min-width: 0;
}
.ing-table th {
  font-family: var(--font-label);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.ing-table td.role-base    { color: var(--ghost); }
.ing-table td.role-working { color: var(--accent-2); }
.src-line { font-size: .8rem; color: var(--ink-dim); }

/* ============================================================
   skin-acid.css — ACID LAB
   Values only. Every skin-varying token from § C2, in full.
   ACID is the unscoped default so a bare <html> still renders.
   ============================================================ */

:root,
:root[data-skin="acid"] {
  --ground:        #0b100c;
  --ground-2:      #0e1510;
  --panel:         #101812;
  --rule:          #1e2b20;
  --stroke-w:      1px;
  --image-scrim:   rgba(0, 0, 0, .58);

  --ink:           #e8f3e4;
  --ink-dim:       #8fa08b;

  /* --ghost is the grey half of the decode — the token the whole
     argument turns on. P5: #3d4a3e @ opacity .55 composited to
     1.41:1, 3x below AA. #758477 with NO opacity measures 4.87:1.
     NEVER reintroduce opacity on a token that carries meaning. */
  --ghost:         #758477;
  --ghost-bg:      transparent;
  --ghost-rule:    #1e2b20;

  --accent:        #c9ff2e;
  --accent-soft:   rgba(201, 255, 46, .16);
  --accent-2:      #ff3d8e;
  --accent-2-soft: rgba(255, 61, 142, .14);
  --accent-3:      #ff3d8e;            /* ACID argues in two colours: aliases --accent-2 */
  --accent-3-soft: rgba(255, 61, 142, .14);

  /* the inked (working) ingredient — 5.77:1 on --ground, the ratio C2's
     P5 note measures the decode's argument by */
  --tok-ink:       #ff3d8e;
  --tok-ink-bg:    rgba(255, 61, 142, .14);
  --tok-ink-rule:  rgba(255, 61, 142, .55);

  --radius-card:   8px;
  --radius-pill:   999px;

  --font-display:  ui-sans-serif, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:     ui-sans-serif, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ease:          cubic-bezier(.19, .84, .27, 1);

  /* skin-local decoration values */
  --display-weight: 800;
  --display-track:  -.035em;
  --tok-radius:     4px;
  --btn-shadow:     0 0 0 1px rgba(201, 255, 46, .4), 0 0 34px rgba(201, 255, 46, .28);
  --card-shadow:    none;
  --ink-on-accent:  #0b100c;

  /* the synth presenter — landing-draft-acid.html § CHORUS FIGURES.
     The build had a flat --ground-2 fill with a 1px border, which read
     as a grey blob. These carry the draft's rim glow, gradient body,
     scanline pass and face-light catch. Same names in both skins (§ C2). */
  --sil-rim:    rgba(201, 255, 46, .60);
  --sil-bloom:  rgba(201, 255, 46, .14);
  --sil-fill-a: #1a241b;
  --sil-fill-b: #0c110d;
  --sil-face:   rgba(201, 255, 46, .16);
}

/* ---------- ACID-only decoration ---------- */

[data-skin="acid"] body,
:root:not([data-skin="pop"]) body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(201, 255, 46, .05), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(255, 61, 142, .04), transparent 55%),
    var(--ground);
}

[data-skin="acid"] .grain,
:root:not([data-skin="pop"]) .grain {
  display: block;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* the marquee is a POP device — ACID has none (§ C3 conflict table) */
[data-skin="acid"] .marquee,
:root:not([data-skin="pop"]) .marquee { display: none; }

[data-skin="acid"] .tok.ink,
:root:not([data-skin="pop"]) .tok.ink {
  box-shadow: 0 0 14px rgba(255, 61, 142, .25);
}

[data-skin="acid"] .pbar,
:root:not([data-skin="pop"]) .pbar {
  box-shadow: 0 0 12px rgba(201, 255, 46, .7);
}

[data-skin="acid"] .lines p::before,
:root:not([data-skin="pop"]) .lines p::before { content: "\201C"; }
[data-skin="acid"] .lines p::after,
:root:not([data-skin="pop"]) .lines p::after { content: "\201D"; }

/* § 4 — ACID chorus placeholders: scanline synth silhouettes, acid rim glow */
[data-skin="acid"] .chorus-mount .silhouette i,
:root:not([data-skin="pop"]) .chorus-mount .silhouette i {
  background: linear-gradient(178deg, #1a241b, #0c110d 78%);
  box-shadow: 0 0 1.5px rgba(201, 255, 46, .55), 0 0 22px rgba(201, 255, 46, .10);
}
[data-skin="acid"] .chorus-mount .silhouette i::after,
:root:not([data-skin="pop"]) .chorus-mount .silhouette i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .55) 3px 4px);
}

/* § 4 / draft .disclose — a dashed accent notice, not a page rule */
[data-skin="acid"] .disclosure,
:root:not([data-skin="pop"]) .disclosure {
  border: var(--stroke-w) dashed rgba(201, 255, 46, .4);
  border-radius: 8px;
  padding: .9rem 1rem;
}
[data-skin="acid"] .disclosure b,
:root:not([data-skin="pop"]) .disclosure b { color: #c9ff2e; }