/* Polymux brand system v2, "The Foundry & The Instrument" (ADR 0130).
   Source of truth: docs/design/branding/BRAND_TECH_GUIDE.md.

   Shared by every page on polymux.io. Pages keep only their own layout CSS.
   Dark is the brand default; light is a reader's choice (theme.js sets
   data-theme on <html> after a click). The operating-system preference is
   deliberately not followed.

   Values marked "derived" are not in the guide. They were derived for the
   light theme (and for the one guide value that fails contrast). Each must reach
   4.5:1 for text and 3:1 for a non-text boundary on the surface it sits on;
   the measured ratios are in ADR 0130 and the PR that introduced this file. */

/* ---------- tokens: dark (brand default) ---------- */
:root{
  color-scheme: dark;

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 3.5vw, 2.75rem);

  --bg-canvas: #0C0C0B;
  --bg-surface: #141413;
  --bg-surface-elevated: #1C1C1A;
  --bg-code: #080807;

  --border-subtle: #2E2E2B;
  /* Deviation from the guide's #52514C, which measures 2.46:1 on canvas and
     2.32:1 on surface against its own "3.1:1+" claim. #6A6963 is 3.55 / 3.35. */
  --border-strong: #6A6963;

  --text-primary: #EDEDEB;
  --text-secondary: #B5B4AE;
  --text-muted: #908E87;

  /* identity accent: Chalk (ADR 0130 amendment). Not a hue; the colour lives in the stage tokens. */
  --accent: #EDEDEB;
  --accent-solid: #EDEDEB;
  --accent-dim: rgba(237, 237, 235, 0.08);
  --accent-border: rgba(237, 237, 235, 0.45);

  /* maturity stages, cool to hot; OKLCH L .78 C .15, one job each: Planned, Built, Tested, Ready */
  --stage-planned: #65C1FE;
  --stage-built: #4AD496;
  --stage-tested: #FF9A5F;
  --stage-ready: #C4A4FE;

  --signal-green: #34D399;

  --signal-crimson: #F87171;
  --signal-crimson-dim: rgba(248, 113, 113, 0.14);

  /* derived: text on a solid accent fill, fill hover, focus ring */
  --on-accent: #0C0C0B;
  --accent-hover: #FFFFFF;
  --focus: #EDEDEB;

  --radius-sm: 2px;
  --radius-md: 4px;
}

/* ---------- tokens: light (derived, not from the guide) ----------
   Neutrals are the Synergy Geeks paper set from the guide; signal colours are
   darkened so they read as text on paper. The block is repeated under @media
   print so paper output always uses it. Keep the two blocks identical. */
:root[data-theme="light"]{
  color-scheme: light;

  --bg-canvas: #F4F3EF;
  --bg-surface: #EAE8E1;
  --bg-surface-elevated: #FFFFFF;
  --bg-code: #EDEBE5;

  --border-subtle: #C8C5BC;
  --border-strong: #787670;

  --text-primary: #111110;
  --text-secondary: #3D3C38;
  --text-muted: #5C5A54;

  --accent: #111110;
  --accent-solid: #111110;
  --accent-dim: rgba(17, 17, 16, 0.06);
  --accent-border: rgba(17, 17, 16, 0.55);

  --stage-planned: #026A9D;
  --stage-built: #04764C;
  --stage-tested: #9C4700;
  --stage-ready: #714CA6;

  --signal-green: #066B4D;

  --signal-crimson: #B91C1C;
  --signal-crimson-dim: rgba(185, 28, 28, 0.08);

  --on-accent: #F4F3EF;
  --accent-hover: #3D3C38;
  --focus: #111110;
}
@media print{
  :root{
    color-scheme: light;
    --bg-canvas: #F4F3EF;
    --bg-surface: #EAE8E1;
    --bg-surface-elevated: #FFFFFF;
    --bg-code: #EDEBE5;
    --border-subtle: #C8C5BC;
    --border-strong: #787670;
    --text-primary: #111110;
    --text-secondary: #3D3C38;
    --text-muted: #5C5A54;
    --accent: #111110;
    --accent-solid: #111110;
    --accent-dim: rgba(17, 17, 16, 0.06);
    --accent-border: rgba(17, 17, 16, 0.55);
    --stage-planned: #026A9D;
    --stage-built: #04764C;
    --stage-tested: #9C4700;
    --stage-ready: #714CA6;
    --signal-green: #066B4D;
    --signal-crimson: #B91C1C;
    --signal-crimson-dim: rgba(185, 28, 28, 0.08);
    --on-accent: #F4F3EF;
    --accent-hover: #3D3C38;
    --focus: #111110;
  }
}

/* ---------- fonts (self-hosted, OFL-1.1; licence texts sit beside the files) ---------- */
@font-face{ font-family:'Space Grotesk'; font-weight:600; font-style:normal; font-display:swap; src:url("/assets/fonts/space-grotesk-600.685bbbf6.woff2") format("woff2"); }
@font-face{ font-family:'Space Grotesk'; font-weight:700; font-style:normal; font-display:swap; src:url("/assets/fonts/space-grotesk-700.35f8aec5.woff2") format("woff2"); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:400; font-style:normal; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-400.3b646991.woff2") format("woff2"); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:500; font-style:normal; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-500.0717336f.woff2") format("woff2"); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:600; font-style:normal; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-600.8960851d.woff2") format("woff2"); }
@font-face{ font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url("/assets/fonts/jetbrains-mono-400.14425ba9.woff2") format("woff2"); }
@font-face{ font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap; src:url("/assets/fonts/jetbrains-mono-500.cb182fee.woff2") format("woff2"); }
@font-face{ font-family:'JetBrains Mono'; font-weight:600; font-style:normal; font-display:swap; src:url("/assets/fonts/jetbrains-mono-600.400c6bfd.woff2") format("woff2"); }

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg-canvas); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-base); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
section{ padding:clamp(56px,8vw,104px) 0; border-top:1px solid var(--border-subtle); }
section:first-of-type{ border-top:0; }

h1,h2,h3{
  margin:0; font-family:var(--font-display); font-weight:700;
  letter-spacing:-0.025em; line-height:1.15; text-wrap:balance;
}
h3{ font-weight:600; }
h1{ font-size:var(--text-3xl); }
h2{ font-size:var(--text-2xl); }
h3{ font-size:var(--text-xl); }
p{ margin:0; }
.lede{ font-size:var(--text-lg); color:var(--text-secondary); line-height:1.55; max-width:62ch; }
.body{ color:var(--text-secondary); max-width:68ch; }
.body b, b, strong{ font-weight:600; }
.body b{ color:var(--text-primary); }

/* Telemetry, schematics, badges and code share one mono setting. */
code, pre, .eyebrow, .chip, .badge, .btn, .theme-toggle, .stage-number,
.top nav, .footbrand, .footlinks, .state-lbl, .lbl, .seal, .meta-line, .contact{
  font-family:var(--font-mono); font-feature-settings:"zero" 1, "ss01" 1;
}
.stage-number, .lbl, .badge, .chip, .meta-line{ font-size:var(--text-xs); letter-spacing:0.03em; font-weight:500; }
.stage-number, .demo, .badge{ font-variant-numeric:tabular-nums; }

.eyebrow{
  font-size:var(--text-sm); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.6em; margin:0 0 20px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); }

a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--text-primary); }

/* ---------- focus (guide section 5.1; never outline:none without a replacement) ---------- */
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* ---------- skip link (first focusable element on every page) ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--accent-solid); color:var(--on-accent); font-family:var(--font-mono);
  font-size:var(--text-sm); font-weight:600; padding:10px 16px; border-radius:var(--radius-sm);
}
.skip:focus{ left:16px; top:12px; }

/* ---------- header ---------- */
header.top{ padding:22px 0; border-bottom:1px solid var(--border-subtle); }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand{
  font-family:var(--font-display); font-weight:700; font-size:var(--text-lg);
  letter-spacing:0.05em; color:var(--text-primary);
}
a.brand{ text-decoration:none; }
.tm{ font-size:.5em; vertical-align:super; letter-spacing:0; font-weight:600; color:var(--text-secondary); }
.top .controls{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 20px; }
.top nav{ display:flex; flex-wrap:wrap; gap:6px 20px; font-size:var(--text-sm); letter-spacing:0.04em; }
.top nav a{
  display:inline-flex; align-items:center; min-height:24px;
  color:var(--text-secondary); text-decoration:none;
}
.top nav a:hover{ color:var(--accent); }

/* Theme toggle. Shown by theme.js only; without script the page stays on the
   brand default and the control does not exist. */
.theme-toggle{
  min-height:44px; padding:8px 14px; background:transparent; color:var(--text-secondary);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font-size:var(--text-sm); font-weight:500; letter-spacing:0.03em; cursor:pointer;
}
.theme-toggle:hover{ color:var(--text-primary); border-color:var(--text-secondary); }
.theme-toggle[hidden]{ display:none; }
@media (pointer:fine){ .theme-toggle{ min-height:32px; padding:4px 12px; } }
@media (pointer:coarse){ .top nav a{ min-height:44px; } }

/* ---------- chips and buttons ---------- */
.spec{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  color:var(--text-secondary); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:4px 10px; background:var(--bg-surface);
}
.chip b{ color:var(--accent); font-weight:600; }

.btn{
  display:inline-flex; align-items:center; min-height:44px; padding:10px 20px;
  font-size:var(--text-sm); font-weight:600; letter-spacing:0.03em; text-decoration:none;
  color:var(--text-primary); background:transparent;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
}
.btn:hover{ color:var(--text-primary); border-color:var(--accent); background:var(--accent-dim); }
.btn.primary{ background:var(--accent-solid); color:var(--on-accent); border-color:var(--accent-solid); }
.btn.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent); }
@media (pointer:fine){ .btn{ min-height:36px; padding:6px 16px; } }

/* ---------- readiness badges: colour + border + bars + word (guide 2.3) ----------
   Four rising bars carry the rung (Planned 1 lit ... Ready 4 lit); the stage
   colour is the border and the bars; the fill tint deepens with the rung. Meaning
   never rests on colour alone: bar count, Planned's dashed border and the word
   all say it. The bars are CSS gradients, so they add no text node and the
   badge's accessible name is its text. Unlit bars use --border-strong (ADR 0130
   decision 7); in forced colours the stage colours give way to system colours. */
.badge{
  --c:var(--border-strong); --t:0%; --unlit:var(--border-strong);
  --b1:var(--unlit); --b2:var(--unlit); --b3:var(--unlit); --b4:var(--unlit);
  display:inline-flex; align-items:center; gap:.7em; align-self:flex-start; line-height:1.5;
  padding:2px 8px; border:1px solid var(--c); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--c) var(--t), transparent);
  color:var(--text-primary);
}
.badge::before{
  content:""; flex:0 0 auto; width:18px; height:13px;
  background:
    linear-gradient(var(--b1), var(--b1)) 0 100% / 3px 4px no-repeat,
    linear-gradient(var(--b2), var(--b2)) 5px 100% / 3px 7px no-repeat,
    linear-gradient(var(--b3), var(--b3)) 10px 100% / 3px 10px no-repeat,
    linear-gradient(var(--b4), var(--b4)) 15px 100% / 3px 13px no-repeat;
}
.badge.planned{ --c:var(--stage-planned); --t:5%;  --b1:var(--c); border-style:dashed; color:var(--text-secondary); }
.badge.built{   --c:var(--stage-built);   --t:10%; --b1:var(--c); --b2:var(--c); }
.badge.tested{  --c:var(--stage-tested);  --t:16%; --b1:var(--c); --b2:var(--c); --b3:var(--c); }
.badge.ready{   --c:var(--stage-ready);   --t:24%; --b1:var(--c); --b2:var(--c); --b3:var(--c); --b4:var(--c); }
/* A card tag that rates several features: one badge per feature, so each keeps its own bars. */
.badges{ display:flex; flex-wrap:wrap; gap:6px 8px; align-self:flex-start; }

/* ---------- terminal block: "Two requests, two outcomes" (guide 2.1) ---------- */
.demo{
  background:var(--bg-code); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:22px 26px; margin-top:34px; font-size:var(--text-sm); line-height:1.8;
  overflow-x:auto; white-space:pre; color:var(--text-primary);
}
.demo .dim{ color:var(--text-muted); }
.demo .leak{ color:var(--signal-crimson); text-decoration:underline wavy var(--signal-crimson); text-underline-offset:4px; }
.demo .blocked{
  color:var(--signal-crimson); background:var(--signal-crimson-dim);
  border-left:3px solid var(--signal-crimson); padding:2px 8px;
}
.demo .blocked b{ color:inherit; }
.demo .ok{ color:var(--signal-green); font-weight:600; }
.demo .no{ font-weight:600; }
.demo .tok{
  color:var(--accent); background:var(--accent-dim);
  border:1px solid var(--accent-border); border-radius:var(--radius-sm); padding:0 4px;
}
.demo .chain{ color:var(--signal-green); }
.demo .arrow{ color:var(--text-muted); }
.demo-cap{ font-size:var(--text-sm); color:var(--text-secondary); margin-top:14px; max-width:68ch; }

/* ---------- "POLYMUX in-path" 01 to 08 (guide 2.2) ---------- */
.core{
  border:1px solid var(--accent-border); border-radius:var(--radius-md);
  background:var(--bg-surface); padding:20px;
}
.core .core-hd{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.core .core-hd b{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; letter-spacing:0.05em; }
.core .core-hd span{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:0.03em; font-weight:500; color:var(--text-secondary); margin-left:auto; }
.stages{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-subtle); border-left:1px solid var(--border-subtle);
}
.stages li{ padding:12px 12px 13px; border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); background:var(--bg-surface); }
.stage-number{ display:block; color:var(--accent); font-weight:600; }
.stage-title{ display:block; font-size:var(--text-sm); font-weight:600; margin-top:3px; line-height:1.3; }

/* ---------- footer ---------- */
footer{ padding:34px 0 60px; border-top:1px solid var(--border-subtle); }
footer .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.disclaimer{ font-size:var(--text-sm); color:var(--text-secondary); max-width:60ch; line-height:1.5; }
.footbrand, .footlinks{ font-size:var(--text-sm); letter-spacing:0.04em; color:var(--text-secondary); }
.footleft{ display:flex; flex-direction:column; gap:10px; }

/* ---------- motion: CSS-only load-in (no script needed under script-src 'self') ---------- */
@media (prefers-reduced-motion: no-preference){
  .rise{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .rise.d1{ animation-delay:.1s; }
  .rise.d2{ animation-delay:.2s; }
  .rise.d3{ animation-delay:.3s; }
  .rise.d4{ animation-delay:.4s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}

@media (max-width:820px){
  .stages{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- print: light tokens come from the @media print block above ---------- */
@media print{
  .skip, .theme-toggle{ display:none; }
  a{ color:var(--text-primary); }
  section{ break-inside:avoid-page; }
}

/* ---------- forced colours (Windows High Contrast) ---------- */
@media (forced-colors: active){
  :focus-visible{ outline-color:Highlight; }
  .chip, .theme-toggle, .btn{ border-color:ButtonText; }
  .badge, .badge.planned, .badge.built, .badge.tested, .badge.ready{ --c:CanvasText; --t:0%; --unlit:GrayText; border-color:ButtonText; }
  .demo .blocked{ border-left-color:CanvasText; }
}