/* ══════════════════════════════════════════════════════════════════════
   TOKENS — one look, two lights
   Loaded after main.css (and polyphon.css) by partials/theme_head.html.

   Two funnels, one system. <html data-theme="business"> is the buyer's
   side, top down: paper, ink, forest green. <html data-theme="developer">
   is the builder's side, bottom up: the workshop's warm charcoal and gold.
   Which page is which is decided in affaible_site/funnels.py.

   Everything that makes the site look like itself is shared and does not
   change with the theme:
     type      Inter for reading, JetBrains Mono for labels, figures, code
     texture   1px hairlines, 10px cards, small-caps mono eyebrows
     stacks    one colour each, so "includes" reads at a glance
   Only the colour tokens below differ.

   Every role means one thing in both themes:
     --t-accent   the brand, and the one thing to press (filled button)
     --t-select   "this is chosen": a tint of the accent, never a new hue
     --t-signal   status and metrics, read-only
     --t-ok/warn/bad   outcomes

   main.css grew a palette per page (--fp-*, --br-*, --co-*, --wk-*,
   --arch-*, the .front shopfront, the workshop's --bg/--text). They are not
   deleted: each is pointed at the tokens here, so every existing rule keeps
   working and draws in the one palette. New rules should read --t-*
   directly. A page without data-theme (the standalone demos, teasers,
   sociotechnical) is untouched.
   ══════════════════════════════════════════════════════════════════════ */

/* ── shared: type, shape, the stacks ── */
html[data-theme] {
  --t-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-mono: 'JetBrains Mono', 'Fira Mono', ui-monospace, monospace;
  --t-din:  'D-DIN', 'Barlow', var(--t-sans);
  --t-radius:    10px;
  --t-radius-sm: 6px;
  --t-hair:      1px;

  --sans: var(--t-sans);
  --mono: var(--t-mono);
  --din:  var(--t-din);
}

/* ── business: paper ── warm stone, so it is the workshop with the lights on */
html[data-theme="business"] {
  color-scheme: light;
  --t-bg:        #fafaf9;
  --t-surface:   #ffffff;
  --t-raise:     #f5f5f4;
  --t-line:      #e7e5e4;
  --t-line-2:    #d6d3d1;
  --t-ink:       #1c1917;
  --t-body:      #44403c;
  --t-muted:     #57534e;
  --t-quiet:     #78716c;   /* 4.6:1 on --t-bg: the floor for small labels */

  --t-accent:      #166534;
  --t-accent-hi:   #15803d;
  --t-accent-ink:  #ffffff;
  --t-accent-soft: rgba(22, 101, 52, 0.08);
  --t-accent-glow: rgba(22, 101, 52, 0.35);
  --t-select:      var(--t-accent);
  --t-select-soft: var(--t-accent-soft);

  --t-signal: #0369a1;
  --t-ok:     #15803d;
  --t-warn:   #b45309;
  --t-bad:    #b42318;

  /* the stacks, held dark enough to read on paper */
  --t-stack-crude:  #c2410c;
  --t-stack-cool:   #0f766e;
  --t-stack-classy: #6d28d9;
  --t-stack-solid:  #a16207;

  /* the engine: a window into the workshop on a business page (the brief's
     loop, the proof sheet). Literally the developer palette. */
  --t-engine-bg:      #1e1c19;
  --t-engine-card:    #26231f;
  --t-engine-line:    #3a3631;
  --t-engine-line-2:  #4a453e;
  --t-engine-ink:     #ededed;
  --t-engine-body:    #cfc8bc;
  --t-engine-muted:   #b3ab9e;
  --t-engine-quiet:   #9a9284;
  --t-engine-accent:  #c9a15d;
}

/* ── developer: the workshop ── the house style, with the greys lifted */
html[data-theme="developer"] {
  color-scheme: dark;
  --t-bg:        #141311;
  --t-surface:   #1e1c19;
  --t-raise:     #26231f;
  --t-line:      #2c2925;
  --t-line-2:    #3a3631;
  --t-ink:       #ededed;
  --t-body:      #a29a8d;
  --t-muted:     #8a8478;
  --t-quiet:     #7a7468;   /* 4.5:1 on --t-bg */

  --t-accent:      #c9a15d;
  --t-accent-hi:   #d9b373;
  --t-accent-ink:  #1a1408;
  --t-accent-soft: rgba(201, 161, 93, 0.10);
  --t-accent-glow: rgba(201, 161, 93, 0.40);
  --t-select:      var(--t-accent);
  --t-select-soft: var(--t-accent-soft);

  --t-signal: #2ec4b6;
  --t-ok:     #4fa877;
  --t-warn:   #ff6b35;
  --t-bad:    #c98a7e;

  --t-stack-crude:  #ff6b35;
  --t-stack-cool:   #2ec4b6;
  --t-stack-classy: #a78bfa;
  --t-stack-solid:  #d4a24c;

  --t-engine-bg:      var(--t-surface);
  --t-engine-card:    var(--t-raise);
  --t-engine-line:    var(--t-line-2);
  --t-engine-line-2:  #4a453e;
  --t-engine-ink:     var(--t-ink);
  --t-engine-body:    #cfc8bc;
  --t-engine-muted:   #b3ab9e;
  --t-engine-quiet:   #9a9284;
  --t-engine-accent:  var(--t-accent);
}

/* ══════════════════════════════
   THE OLD PALETTES, POINTED AT THE TOKENS
══════════════════════════════ */

/* the workshop's names, read by most of main.css */
html[data-theme] {
  --bg:      var(--t-bg);
  --surface: var(--t-surface);
  --border:  var(--t-line);
  --border2: var(--t-line-2);
  --text:    var(--t-ink);
  --body:    var(--t-body);
  --dim:     var(--t-muted);
  --dim2:    var(--t-quiet);
  --accent:  var(--t-accent);
  --accent-hi: var(--t-accent-hi);
  --bad:     var(--t-bad);

  /* the shopfront's (.front): brand, the instrument light, hazard */
  --gold:       var(--t-accent);
  --teal:       var(--t-signal);
  --teal-ink:   var(--t-accent-ink);
  --hazard:     var(--t-warn);
  --hazard-ink: #ffffff;
  --violet:     var(--t-stack-classy);
}
/* in the workshop the A and S stay gold and the instrument light stays teal,
   as they always were */
html[data-theme="developer"] { --gold: var(--t-stack-solid); --teal-ink: #062b27; --hazard-ink: #2b0f04; }
/* on paper anything you can act on is the accent, not a second colour */
html[data-theme="business"]  { --teal: var(--t-accent); }

html[data-theme] [data-stack="crude"]  { --stack: var(--t-stack-crude); }
html[data-theme] [data-stack="cool"]   { --stack: var(--t-stack-cool); }
html[data-theme] [data-stack="classy"] { --stack: var(--t-stack-classy); }
html[data-theme] [data-stack="solid"]  { --stack: var(--t-stack-solid); }

/* the front door (.front-page) */
html[data-theme] .front-page {
  --fp-white:    var(--t-surface);
  --fp-stone:    var(--t-bg);
  --fp-ink:      var(--t-ink);
  --fp-ink-2:    var(--t-ink);
  --fp-body:     var(--t-body);
  --fp-muted:    var(--t-muted);
  --fp-line:     var(--t-line);
  --fp-line-2:   var(--t-line-2);
  --fp-green:    var(--t-accent);
  --fp-green-hi: var(--t-accent-hi);
}

/* the technical brief (.brief-page): paper, with the engine as a window */
html[data-theme] .brief-page {
  --br-stone:    var(--t-bg);
  --br-ink:      var(--t-ink);
  --br-charcoal: var(--t-engine-bg);
  --br-card:     var(--t-engine-card);
  --br-line:     var(--t-engine-line);
  --br-body:     var(--t-body);
  --br-muted:    var(--t-muted);
  --br-green:    var(--t-accent);
  --br-sky:      var(--t-signal);
  --br-teal:     var(--t-engine-accent);
}
html[data-theme] .brief-room {
  --text:    var(--t-ink);
  --body:    var(--t-body);
  --dim:     var(--t-muted);
  --border:  var(--t-line);
  --border2: var(--t-line-2);
  --accent:  var(--t-accent);
  --gold:    var(--t-accent);
}
/* The provenance record -- the Show-your-working sheet and the whole run on
   /provenance/ -- is business content, so on the business side it is on
   paper like the page around it. In the workshop it keeps the dark ladder. */
html[data-theme="business"] .stack-sheet-proof,
html[data-theme="business"] .pp,
html[data-theme="business"] .brief-room .stack-sheet-proof,
html[data-theme="business"] .brief-room .pp {
  --bg:      var(--t-raise);
  --surface: var(--t-surface);
  --border:  var(--t-line);
  --border2: var(--t-line-2);
  --text:    var(--t-ink);
  --body:    var(--t-body);
  --dim:     var(--t-muted);
  --dim2:    var(--t-quiet);
  --accent:  var(--t-accent);
  --teal:    var(--t-accent);
  /* polyphon's verdict colours, held dark enough to read on white */
  --pp-high:   #0f766e;
  --pp-medium: #a16207;
  --pp-low:    #b42318;
  --pp-model:  #6d28d9;
}
html[data-theme="developer"] .brief-room .stack-sheet-proof,
html[data-theme="developer"] .brief-room .pp {
  --bg:      var(--t-engine-bg);
  --surface: var(--t-engine-card);
  --border:  var(--t-engine-line);
  --border2: var(--t-engine-line-2);
  --text:    var(--t-engine-ink);
  --body:    var(--t-engine-body);
  --dim:     var(--t-engine-muted);
  --dim2:    var(--t-engine-quiet);
  --accent:  var(--t-engine-accent);
  --teal:    var(--t-engine-accent);
}
html[data-theme="business"] .stack-sheet-proof { background: var(--t-surface); color: var(--t-body); }

/* The ribbon diagram is rendered dark (polyphon/sankey-dark.png). On paper it
   sits in the engine's frame -- a window into the workshop -- rather than as a
   black slab. TECHNICAL, unavoidable: a light rendering would need the
   polyphon export re-run with a light theme. */
html[data-theme="business"] .pp .pp-figure {
  background: var(--t-engine-bg);
  border-radius: var(--t-radius);
  padding: 14px 14px 10px;
}
html[data-theme="business"] .pp .pp-figure figcaption { color: var(--t-engine-muted); }

/* the provenance pages' eyebrow: the way back to Show your working */
.brief-eyebrow {
  font-family: var(--t-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-quiet);
  margin-bottom: 0.9rem;
}
.brief-eyebrow a { color: var(--t-accent); text-decoration: none; border-bottom: 1px solid var(--t-accent-soft); }
.brief-eyebrow a:hover { border-bottom-color: var(--t-accent); }

/* the rotating word (static/js/provenance-title.js): a soft cross-fade */
[data-provenance-brand] {
  display: inline-block;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-provenance-brand].is-turning { opacity: 0; transform: translateY(0.12em); }
@media (prefers-reduced-motion: reduce) {
  [data-provenance-brand] { transition: none; }
}

/* the brief's architecture figure (.arch) */
html[data-theme] .arch {
  --arch-sans:    var(--t-sans);
  --arch-frame:   var(--t-raise);
  --arch-panel:   var(--t-line);
  --arch-well:    var(--t-raise);
  --arch-card:    var(--t-surface);
  --arch-line:    var(--t-line-2);
  --arch-line-2:  var(--t-line);
  --arch-ink:     var(--t-ink);
  --arch-muted:   var(--t-muted);
  --arch-caption: var(--t-body);
  --arch-green:      var(--t-ok);
  --arch-green-glow: var(--t-accent-glow);
  --arch-amber:      var(--t-warn);
  --arch-off:     var(--t-line-2);
  --arch-btn:     var(--t-quiet);
}

/* the shop and the checkout (.shop-page, .checkout-page): one action
   colour and one selection colour, both the accent */
html[data-theme] .shop-page,
html[data-theme] .checkout-page {
  --co-bg:      var(--t-bg);
  --co-surface: var(--t-surface);
  --co-raise:   var(--t-raise);
  --co-line:    var(--t-line);
  --co-line-2:  var(--t-line-2);
  --co-text:    var(--t-ink);
  --co-body:    var(--t-body);
  --co-muted:   var(--t-muted);
  --co-cta:     var(--t-accent);
  --co-cta-hi:  var(--t-accent-hi);
  --co-cta-ink: var(--t-accent-ink);
  --co-sel:     var(--t-select);
  --co-bad:     var(--t-bad);
}
html[data-theme] .wizard-page {
  --wk-check:    var(--t-select);
  --wk-check-hi: var(--t-accent-hi);
}

/* the loop (.cap): open-loop burns warn, closed-loop runs the accent */
html[data-theme] .cap { --cap-hot: var(--t-warn); }
html[data-theme] .cap[data-mode="closed-loop"],
html[data-theme] .front .cap[data-mode="closed-loop"] {
  --cap-link: var(--accent);
  --cap-hot:  var(--accent);
  --cap-glow: var(--t-accent-glow);
}

/* ══════════════════════════════
   THE CANVAS
   main.css paints some pages with literals (the shop's #F4F5F7, the
   brief's stone). On a themed page the canvas is the theme's, edge to edge.
══════════════════════════════ */
html[data-theme],
html[data-theme]:has(> body),
html[data-theme]:has(> body[class]),
html[data-theme] body,
html[data-theme] body[class],
html[data-theme] body[class] .shell,
html[data-theme] body .shell {
  background: var(--t-bg) !important;
}
html[data-theme] body { color: var(--t-body); }
/* on paper the prose is set in the sans; mono stays for labels and figures,
   which set their own family */
html[data-theme="business"] body { font-family: var(--t-sans); }

::selection { background: var(--t-accent-soft, rgba(201, 161, 93, 0.2)); }
html[data-theme] :focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }

/* ══════════════════════════════
   THE HEADER — one for both funnels (partials/header.html)
   Every page used to restyle it; here it is drawn once, from the tokens,
   and wins over the per-page versions.
══════════════════════════════ */
html[data-theme] .site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  background: var(--t-bg);
  border-bottom: var(--t-hair) solid var(--t-line);
}
html[data-theme] .site-header .logo {
  font-family: var(--t-mono);
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  color: var(--t-ink);
  text-decoration: none;
}

/* the switch between funnels: two words, the current one underlined in the
   accent. Shown only to people who can walk both. */
.funnel-switch {
  display: flex;
  gap: 0.25rem;
  margin-right: auto;
  padding: 3px;
  border: var(--t-hair) solid var(--t-line);
  border-radius: 999px;
}
.funnel-switch a {
  font-family: var(--t-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-muted);
  text-decoration: none;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.funnel-switch a:hover { color: var(--t-ink); }
.funnel-switch a[aria-current="page"] {
  color: var(--t-accent-ink);
  background: var(--t-accent);
}
/* with no switch, the tools still go to the right */
html[data-theme] .site-header-tools { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.funnel-switch + .site-header-tools { margin-left: 0; }

html[data-theme] .site-header .landing-spanner,
html[data-theme] .site-header .header-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--t-muted);
  background: transparent;
  border: var(--t-hair) solid var(--t-line);
  border-radius: 999px;
}
html[data-theme] .site-header .landing-spanner svg { width: 18px; height: 18px; }
html[data-theme] .site-header .landing-spanner:hover,
html[data-theme] .site-header .header-account:hover {
  color: var(--t-accent);
  border-color: var(--t-accent);
  background: var(--t-accent-soft);
}
html[data-theme] .site-header .logout-link,
html[data-theme] .site-header .login-link {
  text-decoration: none;
  font-family: var(--t-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--t-muted);
}
html[data-theme] .site-header .logout-link:hover,
html[data-theme] .site-header .login-link:hover { color: var(--t-ink); }

html[data-theme] .site-footer {
  background: var(--t-bg);
  color: var(--t-quiet);
  border-top: var(--t-hair) solid var(--t-line);
}

/* the front door's own header, re-inked the same way */
html[data-theme] .front-header { background: var(--t-bg); border-bottom: var(--t-hair) solid var(--t-line); }

@media (max-width: 700px) {
  html[data-theme] .site-header { padding: 0.85rem 1rem; gap: 0.75rem; }
  .funnel-switch a { padding: 0.3rem 0.55rem; letter-spacing: 0.06em; }
}

/* ══════════════════════════════
   SHARED COMPONENTS — the same on both sides
══════════════════════════════ */

/* the primary action: filled accent, whichever funnel */
html[data-theme] .co-cta,
html[data-theme] .wiz-btn.is-primary,
html[data-theme] .front .wiz-btn.is-primary,
html[data-theme] .btn-primary {
  color: var(--t-accent-ink);
  background: var(--t-accent);
  border-color: var(--t-accent);
}
html[data-theme] .co-cta:hover,
html[data-theme] .wiz-btn.is-primary:hover,
html[data-theme] .btn-primary:hover {
  background: var(--t-accent-hi);
  border-color: var(--t-accent-hi);
  color: var(--t-accent-ink);
  filter: none;
}
html[data-theme] .wiz-btn,
html[data-theme] .front .wiz-btn {
  color: var(--t-accent);
  border-color: var(--t-accent);
}
html[data-theme] .wiz-btn:hover,
html[data-theme] .front .wiz-btn:hover { background: var(--t-accent-soft); color: var(--t-ink); }

/* the A and S, and the product names */
html[data-theme] .stack-title .din,
html[data-theme] .stack-as,
html[data-theme] .front .stack-title .din,
html[data-theme] .front .stack-as { color: var(--gold); }
html[data-theme] .front .stack-card .stack-name .stack-as { color: var(--stack, var(--gold)); }

/* small-caps mono eyebrows: one size, one tracking, one colour */
html[data-theme] .eyebrow,
html[data-theme] .area-label,
html[data-theme] .section-label {
  font-family: var(--t-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-quiet);
}

/* links in prose */
html[data-theme="business"] main a:not([class]) { color: var(--t-accent); }
html[data-theme="business"] main a:not([class]):hover { color: var(--t-accent-hi); }

/* form fields: paper or workshop, the same field */
html[data-theme] main input[type="text"],
html[data-theme] main input[type="email"],
html[data-theme] main input[type="number"],
html[data-theme] main input[type="password"],
html[data-theme] main select,
html[data-theme] main textarea {
  color: var(--t-ink);
  background: var(--t-surface);
  border-color: var(--t-line-2);
}
html[data-theme] main input:focus,
html[data-theme] main select:focus,
html[data-theme] main textarea:focus {
  border-color: var(--t-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--t-accent-soft);
}