/* bdils.com design tokens, v2 (four-theme architecture). Owner: Apollo.
   -------------------------------------------------------------------------------------------
   LAYERS
   1. Primitives  (--bd-p-*)   raw palette, type stacks, scales. Never used by components directly.
   2. Semantic    (--bd-*)     what components consume: surface, fg, accent, border, radius, shadow, type.
   3. Theme blocks             html[data-theme="skeuomorph|extrude|primitives|gel|frost|retro"] override SEMANTIC tokens only.
                               Modern is the :root base and the default theme. The hero/skins that tokens
                               cannot express (gloss, bevels, pixel borders) live in themes/<name>.css.
   Theme attribute, ids and storage key (decision, matches Zephyrus motion-tokens.css):
     html[data-theme]  modern | skeuomorph | extrude | primitives | gel | frost | retro      localStorage "bdils-theme"
     Orpheus sound ids: v1-modern | v2-skeuo | v5-extrude | v6-primitives | v7-gel | v9-frost | v4-16bit (map in JS, never in CSS)
   Motion: --bd-dur-* / --bd-ease-* are the UI defaults, unchanged from v1 so components.css keeps working.
   Choreography is Zephyrus's --bd-m-* layer (motion-tokens.css) and is not duplicated here.
   Light model, all themes: ONE key light top-left. Highlights top/left, shadows fall down and slightly right. */

:root{
  /* ================= 1. PRIMITIVES ================= */
  /* neutrals, warm (Modern + Skeuomorph grounds) */
  --bd-p-paper:#f4f2ee; --bd-p-paper-2:#ece9e3; --bd-p-bench:#dcd8cf; --bd-p-white:#fff;
  --bd-p-ink:#141517; --bd-p-ink-2:#3b3f45; --bd-p-ink-3:#555a61; --bd-p-ink-4:#676c73;
  /* signal orange (one accent, every theme) */
  --bd-p-orange:#ff5a30; --bd-p-orange-hi:#ff7a55; --bd-p-orange-lo:#e24a21; --bd-p-orange-edge:#8e2f14;
  --bd-p-orange-text:#b33d17;   /* 4.9:1 on paper, 5.3:1 on white */
  --bd-p-orange-text-dark:#ff8a62; /* 7.1:1 on night */
  /* semantic colors */
  --bd-p-error:#b3261e; --bd-p-error-dark:#ff7b72; --bd-p-ok:#176d37; --bd-p-ok-dark:#6fd38b;
  /* night (Modern dark surfaces: modal on v4 reference, footer) */
  --bd-p-night:#151618; --bd-p-night-2:#1f2124; --bd-p-night-3:#2a2d31; --bd-p-on-night:#f1efea; --bd-p-on-night-2:#b9bcc0;
  /* type stacks */
  --bd-p-sans-modern:"Inter",ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --bd-p-sans-era:"Helvetica Neue","Lucida Grande",Helvetica,Arial,sans-serif;              /* 2010s */
  --bd-p-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --bd-p-pixel:"Press Start 2P","Courier New",monospace;                                     /* Retro display only */
  /* spacing (4px base) */
  --bd-s-1:4px; --bd-s-2:8px; --bd-s-3:12px; --bd-s-4:16px; --bd-s-5:24px; --bd-s-6:32px; --bd-s-7:48px; --bd-s-8:64px; --bd-s-9:96px; --bd-s-10:128px;
  --bd-gutter:clamp(20px,4vw,56px); --bd-max:1200px; --bd-target:44px;
  --bd-z-nav:50; --bd-z-bar:60; --bd-z-modal:100;
  /* motion UI defaults (unchanged names) */
  --bd-dur-instant:80ms; --bd-dur-fast:150ms; --bd-dur-base:240ms; --bd-dur-slow:420ms; --bd-dur-scene:800ms;
  --bd-ease-standard:cubic-bezier(.2,0,0,1); --bd-ease-out:cubic-bezier(.16,1,.3,1); --bd-ease-in:cubic-bezier(.5,0,.9,.4);
  --bd-ease-press:cubic-bezier(.3,.7,.4,1); --bd-ease-settle:cubic-bezier(.34,1.4,.5,1);

  /* ================= 2. SEMANTIC, MODERN BASE (flagship) =================
     Reference quality: Vercel/Geist border-as-shadow, Linear type compression, Radix neutral scale.
     Surfaces are flat white on warm paper; depth is a 1px alpha ring + 2 soft layers, never a blob. */
  --bd-theme-name:"Modern";
  --bd-scheme:light;
  --bd-bg:var(--bd-p-paper);              /* page ground */
  --bd-bg-2:var(--bd-p-paper-2);          /* alternate band */
  --bd-surface:var(--bd-p-white);         /* cards, fields, modal */
  --bd-surface-2:#f8f7f4;                 /* hover / subtle */
  --bd-surface-3:#eeece7;                 /* pressed / well */
  --bd-hero-bg:var(--bd-p-bench);         /* hero field ground (B daylight) */
  --bd-fg:var(--bd-p-ink); --bd-fg-2:var(--bd-p-ink-2); --bd-fg-3:var(--bd-p-ink-3); --bd-fg-4:var(--bd-p-ink-4);
  --bd-accent:var(--bd-p-orange); --bd-accent-hi:var(--bd-p-orange-hi); --bd-accent-lo:var(--bd-p-orange-lo);
  --bd-accent-fg:#fff;                    /* text on accent: 15px 600 Inter on #ff5a30 = 3.3:1, large-text rule; use 16px+ 600 */
  --bd-accent-text:var(--bd-p-orange-text);
  --bd-error:var(--bd-p-error); --bd-ok:var(--bd-p-ok);
  --bd-border:rgba(20,21,23,.10); --bd-border-2:rgba(20,21,23,.18); --bd-border-strong:rgba(20,21,23,.42);
  --bd-ring:0 0 0 2px var(--bd-surface),0 0 0 4px #c2410c;   /* focus-visible everywhere; outer band 4.0 to 5.2:1 on the light grounds (the brand orange was 2.4 to 3.1:1) */
  --bd-scrim:rgba(20,21,23,.55);
  --bd-flag-bg:#fff3c4; --bd-flag-fg:#5c4400;
  /* radius */
  --bd-r-xs:4px; --bd-r-sm:6px; --bd-r-md:8px; --bd-r-lg:12px; --bd-r-xl:16px; --bd-r-pill:999px;
  /* elevation (border + lift + ambient, Vercel style stacks) */
  --bd-sh-ring:0 0 0 1px var(--bd-border);
  --bd-sh-0:0 0 0 1px var(--bd-border);
  --bd-sh-1:0 0 0 1px var(--bd-border),0 1px 2px rgba(20,21,23,.05);
  --bd-sh-2:0 0 0 1px var(--bd-border),0 2px 4px rgba(20,21,23,.05),0 8px 16px -6px rgba(20,21,23,.08);
  --bd-sh-3:0 0 0 1px var(--bd-border),0 4px 8px rgba(20,21,23,.06),0 16px 32px -12px rgba(20,21,23,.14);
  --bd-sh-modal:0 0 0 1px var(--bd-border-2),0 8px 16px rgba(20,21,23,.08),0 32px 64px -16px rgba(20,21,23,.28);
  --bd-sh-inset:inset 0 1px 2px rgba(20,21,23,.06);
  --bd-sh-btn:0 0 0 1px var(--bd-border-2),0 1px 2px rgba(20,21,23,.06),inset 0 1px 0 rgba(255,255,255,.6);
  --bd-sh-btn-primary:0 0 0 1px var(--bd-p-orange-lo),0 1px 2px rgba(226,74,33,.25),inset 0 1px 0 rgba(255,255,255,.22);
  /* type */
  --bd-sans:var(--bd-p-sans-modern); --bd-mono:var(--bd-p-mono); --bd-display:var(--bd-p-sans-modern);
  --bd-fs-display:clamp(48px,6vw,88px); --bd-fs-h1:clamp(40px,4.8vw,64px); --bd-fs-h2:clamp(30px,3.2vw,44px);
  --bd-fs-h3:clamp(20px,1.6vw,22px); --bd-fs-lead:clamp(17px,1.4vw,20px); --bd-fs-body:16px; --bd-fs-small:14px;
  --bd-fs-label:12px; --bd-fs-label-lg:13px;
  --bd-lh-display:1; --bd-lh-head:1.1; --bd-lh-body:1.55;
  --bd-ls-display:-.035em; --bd-ls-head:-.025em; --bd-ls-label:.06em; --bd-label-case:none;
  --bd-fw-display:600; --bd-fw-head:600; --bd-fw-ui:500; --bd-fw-body:400;
  --bd-font-feat:"cv01","ss03","liga";   /* Inter; ignored by fallbacks */
  --bd-section-y:clamp(80px,9vw,128px);
  /* controls */
  --bd-ctl-h:40px; --bd-ctl-h-lg:48px; --bd-ctl-h-sm:32px; --bd-ctl-px:16px; --bd-ctl-r:var(--bd-r-md);
  --bd-field-bg:var(--bd-surface); --bd-field-border:var(--bd-border-2); --bd-field-border-hover:var(--bd-border-strong);
  --bd-nav-h:64px;
  /* control bar */
  --bd-bar-bg:rgba(255,255,255,.82); --bd-bar-blur:14px; --bd-bar-r:14px; --bd-bar-sh:var(--bd-sh-3);
}
html[data-theme="modern"]{ /* explicit alias of :root, so [data-theme] selectors always match */ }

/* ================= 3. SKEUOMORPH (v2, early 2010s) =================
   iOS 6 / OS X Lion. Linen ground, leather header band, glossy pill buttons, inset fields, embossed labels.
   Era type: Helvetica Neue. Radii bigger. Shadows have real offsets. Textures live in themes/skeuomorph.css. */
html[data-theme="skeuomorph"]{
  --bd-theme-name:"Skeuomorph"; --bd-scheme:light;
  --bd-bg:#e9e5dc; --bd-bg-2:#ddd8cc; --bd-surface:#f7f5ef; --bd-surface-2:#efece4; --bd-surface-3:#e2ded3;
  --bd-hero-bg:#cfc9bb;
  --bd-fg:#1c1a16; --bd-fg-2:#3e3a33; --bd-fg-3:#47423a; --bd-fg-4:#4b463e;   /* D2: fg-3 #5c564c / fg-4 #6f685c were 2.8-3.8:1 on the grained paper (noise overlay darkens it to ~L .47 at the 10th percentile) */
  --bd-accent:#f5531f; --bd-accent-hi:#ff9a6a; --bd-accent-lo:#c53d10; --bd-accent-fg:#fff; --bd-accent-text:#7f280c;   /* D2: #b33d17 was 3.0-3.8:1 on paper and the linen bands */
  --bd-border:rgba(40,30,15,.18); --bd-border-2:rgba(40,30,15,.30); --bd-border-strong:rgba(40,30,15,.55);
  --bd-ring:0 0 0 2px #fff,0 0 0 4px #c2410c;
  --bd-scrim:rgba(20,16,10,.6);
  --bd-r-xs:4px; --bd-r-sm:6px; --bd-r-md:9px; --bd-r-lg:14px; --bd-r-xl:18px;
  --bd-sh-ring:0 0 0 1px var(--bd-border-2);
  --bd-sh-0:0 0 0 1px var(--bd-border-2);
  --bd-sh-1:0 1px 0 #fff inset,0 0 0 1px var(--bd-border-2),0 1px 2px rgba(0,0,0,.18);
  --bd-sh-2:0 1px 0 #fff inset,0 0 0 1px var(--bd-border-2),0 2px 3px rgba(0,0,0,.2),0 6px 10px -4px rgba(0,0,0,.25);
  --bd-sh-3:0 1px 0 #fff inset,0 0 0 1px var(--bd-border-strong),0 3px 5px rgba(0,0,0,.22),0 14px 24px -8px rgba(0,0,0,.35);
  --bd-sh-modal:0 1px 0 #fff inset,0 0 0 1px rgba(0,0,0,.5),0 10px 20px rgba(0,0,0,.3),0 40px 70px -10px rgba(0,0,0,.55);
  --bd-sh-inset:inset 0 2px 4px rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.12),0 1px 0 #fff;
  --bd-sh-btn:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.3),0 0 0 1px rgba(40,30,15,.45);
  --bd-sh-btn-primary:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.35),0 0 0 1px #9c3109;
  --bd-sans:var(--bd-p-sans-era); --bd-display:var(--bd-p-sans-era);
  --bd-fw-display:700; --bd-fw-head:700; --bd-fw-ui:700; --bd-ls-display:-.03em; --bd-ls-head:-.02em; --bd-ls-label:.04em;
  --bd-font-feat:normal;
  --bd-ctl-r:var(--bd-r-md);
  --bd-field-bg:#fff; --bd-field-border:rgba(40,30,15,.45); --bd-field-border-hover:rgba(40,30,15,.6);
  --bd-bar-bg:rgba(60,56,50,.92); --bd-bar-blur:0px; --bd-bar-r:16px;
}

/* POSTMODERN "Assembly" retired from the Style control (Brian, 2026-10-13). File kept at retired/postmodern.css. */

/* ================= 3. EXTRUDE (soft extrusion, "one soft surface") =================
   One continuous matte surface. Controls are pushed up out of it or pressed into it; there are no strokes.
   Light model: key top-left. Raised = light shadow top-left + dark shadow bottom-right. Pressed = the same, inset.
   ACCESSIBILITY CONTRACT (this is the style's known hazard, so it is encoded in tokens, not left to taste):
   (1) text pairs are all >= 4.5:1 on the surface; (2) every FIELD and every TOGGLE TRACK carries a 1.5px contour at >= 3:1 (--bd-field-border);
   (3) state is never depth alone: on = accent glyph/fill + depth; focus = 3px ink ring + 3px surface gap, 3:1 vs surface. */
html[data-theme="extrude"]{
  --bd-theme-name:"Extrude"; --bd-scheme:light;
  --ex-hi:#ffffff; --ex-lo:#b3bbd2; --ex-lo-2:#9aa4c2;
  --bd-bg:#e4e8f1; --bd-bg-2:#dce1ed; --bd-surface:#e4e8f1; --bd-surface-2:#ebeef6; --bd-surface-3:#d6dbea;
  --bd-hero-bg:#e4e8f1;
  --bd-fg:#1f2740; --bd-fg-2:#2c3558; --bd-fg-3:#454e6e; --bd-fg-4:#535c7c;
  --bd-accent:#c24a14; --bd-accent-hi:#b0400e; --bd-accent-lo:#a8380a; --bd-accent-fg:#ffffff; --bd-accent-text:#a8380a;
  --bd-error:#a8201a; --bd-ok:#166534;
  --bd-border:rgba(31,39,64,.14); --bd-border-2:rgba(31,39,64,.28); --bd-border-strong:#6b7490;
  --bd-ring:0 0 0 3px var(--bd-surface),0 0 0 6px #1f2740;
  --bd-scrim:rgba(31,39,64,.5);
  --bd-r-xs:8px; --bd-r-sm:12px; --bd-r-md:16px; --bd-r-lg:22px; --bd-r-xl:28px; --bd-r-pill:999px;
  --bd-sh-ring:0 0 0 0 transparent;
  --bd-sh-0:none;
  --bd-sh-1:5px 5px 10px var(--ex-lo),-5px -5px 10px var(--ex-hi);
  --bd-sh-2:8px 8px 16px var(--ex-lo),-8px -8px 16px var(--ex-hi);
  --bd-sh-3:12px 12px 24px var(--ex-lo),-12px -12px 24px var(--ex-hi);
  --bd-sh-modal:18px 18px 40px var(--ex-lo-2),-14px -14px 34px var(--ex-hi);
  --bd-sh-inset:inset 4px 4px 8px var(--ex-lo),inset -4px -4px 8px var(--ex-hi);
  --bd-sh-btn:6px 6px 12px var(--ex-lo),-6px -6px 12px var(--ex-hi);
  --bd-sh-btn-primary:6px 6px 12px rgba(150,70,25,.38),-6px -6px 12px var(--ex-hi);
  --bd-sans:var(--bd-p-sans-modern); --bd-display:var(--bd-p-sans-modern);
  --bd-fw-display:700; --bd-fw-head:700; --bd-fw-ui:600; --bd-ls-display:-.035em; --bd-ls-head:-.025em;
  --bd-ctl-h:44px; --bd-ctl-h-lg:52px; --bd-ctl-r:999px; --bd-ctl-px:20px;
  --bd-field-bg:#e4e8f1; --bd-field-border:#6b7490; --bd-field-border-hover:#4a5370;
  --bd-bar-bg:#e4e8f1; --bd-bar-blur:0px; --bd-bar-r:999px; --bd-bar-sh:10px 10px 22px var(--ex-lo),-10px -10px 22px var(--ex-hi);
  --bd-ease-press:cubic-bezier(.3,.7,.4,1);
}

/* ================= 3. PRIMITIVES (geometry, flat colour) =================
   Everything reduces to circle, pill, ring, dot, bar. Flat fills, 2px ink strokes, zero shadows except a hard 3px offset on the primary.
   Labels are NEVER hidden (the board's hover-only labels were cut: unsafe for 40+ controls); the label is the shape's caption.
   Four colours plus cream and ink. Orange for action, blue for selection, yellow for attention, ink for structure. */
html[data-theme="primitives"]{
  --bd-theme-name:"Primitives"; --bd-scheme:light;
  --pr-cream:#f2ede4; --pr-ink:#141210; --pr-blue:#2342ff; --pr-or:#d2400a; --pr-yel:#ffc933;
  --bd-bg:#f2ede4; --bd-bg-2:#ebe4d6; --bd-surface:#fbf8f1; --bd-surface-2:#f2ede4; --bd-surface-3:#e6dfd0;
  --bd-hero-bg:#f2ede4;
  --bd-fg:#141210; --bd-fg-2:#2b2824; --bd-fg-3:#4a4640; --bd-fg-4:#5e5a52;
  --bd-accent:#d2400a; --bd-accent-hi:#c0380a; --bd-accent-lo:#b13405; --bd-accent-fg:#ffffff; --bd-accent-text:#b13405;
  --bd-error:#b3261e; --bd-ok:#176d37;
  --bd-border:#141210; --bd-border-2:#141210; --bd-border-strong:#141210;
  --bd-ring:0 0 0 3px #f2ede4,0 0 0 6px #2342ff;
  --bd-scrim:rgba(20,18,16,.6);
  --bd-r-xs:50%; --bd-r-sm:999px; --bd-r-md:999px; --bd-r-lg:36px; --bd-r-xl:48px; --bd-r-pill:999px;
  --bd-sh-ring:0 0 0 2px #141210; --bd-sh-0:0 0 0 2px #141210;
  --bd-sh-1:0 0 0 2px #141210; --bd-sh-2:0 0 0 2px #141210; --bd-sh-3:0 0 0 2px #141210,6px 6px 0 0 #141210;
  --bd-sh-modal:0 0 0 2px #141210,10px 10px 0 0 #141210;
  --bd-sh-inset:none;
  --bd-sh-btn:0 0 0 2px #141210; --bd-sh-btn-primary:0 0 0 2px #141210,4px 4px 0 0 #141210;
  --bd-sans:var(--bd-p-sans-modern); --bd-display:var(--bd-p-sans-modern);
  --bd-fw-display:800; --bd-fw-head:800; --bd-fw-ui:700; --bd-ls-display:-.045em; --bd-ls-head:-.03em;
  --bd-ctl-h:44px; --bd-ctl-h-lg:52px; --bd-ctl-r:999px; --bd-ctl-px:22px;
  --bd-field-bg:#fbf8f1; --bd-field-border:#141210; --bd-field-border-hover:#2342ff;
  --bd-bar-bg:#fbf8f1; --bd-bar-blur:0px; --bd-bar-r:999px; --bd-bar-sh:0 0 0 2px #141210,5px 5px 0 0 #141210;
  --bd-ease-settle:cubic-bezier(.3,1.6,.5,1);
}

/* ================= 3. GEL (soft-body blobs, colour shadows) =================
   Hero and bands: violet. Reading sections: lavender. Every control is a cream (or mint) soft mass, no strokes, with ONE inner highlight (top-left),
   ONE inner core shadow (bottom-right) and a coloured drop shadow whose hue is the violet, never black. Hover = squash, press = squash harder, release = overshoot.
   Hierarchy is carried by shadow size. Text is ink violet on cream (11.9:1) or cream on violet (5.9:1). */
html[data-theme="gel"]{
  --bd-theme-name:"Gel"; --bd-scheme:light;
  --gl-violet:#5b4be0; --gl-violet-2:#4a3bc8; --gl-cream:#fff3e8; --gl-mint:#7df0c4; --gl-ink:#2a1a7a; --gl-sh:rgba(26,12,90,.42);
  --bd-bg:#efeaff; --bd-bg-2:#5b4be0; --bd-surface:#fff3e8; --bd-surface-2:#fffaf4; --bd-surface-3:#f3e4d6;
  --bd-hero-bg:#5b4be0;
  --bd-fg:#2a1a7a; --bd-fg-2:#34258a; --bd-fg-3:#4a3c9a; --bd-fg-4:#52449e;
  --bd-accent:#7df0c4; --bd-accent-hi:#9bf5d3; --bd-accent-lo:#5ad8aa; --bd-accent-fg:#2a1a7a; --bd-accent-text:#4a3bc8;
  --bd-error:#b0155e; --bd-ok:#0b6b45;
  --bd-border:rgba(42,26,122,.12); --bd-border-2:rgba(42,26,122,.24); --bd-border-strong:#6a5cc0;
  --bd-ring:0 0 0 3px #fff3e8,0 0 0 6px #2a1a7a;
  --bd-scrim:rgba(26,12,90,.6);
  --bd-r-xs:10px; --bd-r-sm:16px; --bd-r-md:22px; --bd-r-lg:30px; --bd-r-xl:40px; --bd-r-pill:999px;
  --bd-sh-ring:0 0 0 0 transparent; --bd-sh-0:none;
  --bd-sh-1:inset 0 3px 3px rgba(255,255,255,.9),inset 0 -4px 6px rgba(120,90,60,.16),0 6px 12px -2px var(--gl-sh);
  --bd-sh-2:inset 0 4px 4px rgba(255,255,255,.9),inset 0 -6px 10px rgba(120,90,60,.16),0 12px 22px -4px var(--gl-sh);
  --bd-sh-3:inset 0 4px 5px rgba(255,255,255,.9),inset 0 -8px 14px rgba(120,90,60,.16),0 20px 34px -6px var(--gl-sh);
  --bd-sh-modal:inset 0 4px 5px rgba(255,255,255,.9),inset 0 -10px 18px rgba(120,90,60,.14),0 36px 70px -10px rgba(26,12,90,.6);
  --bd-sh-inset:inset 0 4px 8px rgba(42,26,122,.22),inset 0 -2px 3px rgba(255,255,255,.7);
  --bd-sh-btn:var(--bd-sh-1);
  --bd-sh-btn-primary:inset 0 3px 3px rgba(255,255,255,.7),inset 0 -5px 8px rgba(20,150,100,.3),0 8px 14px -2px var(--gl-sh);
  --bd-sans:var(--bd-p-sans-modern); --bd-display:var(--bd-p-sans-modern);
  --bd-fw-display:800; --bd-fw-head:800; --bd-fw-ui:700; --bd-ls-display:-.04em; --bd-ls-head:-.03em;
  --bd-ctl-h:46px; --bd-ctl-h-lg:54px; --bd-ctl-r:999px; --bd-ctl-px:24px;
  --bd-field-bg:#fffaf4; --bd-field-border:#6a5cc0; --bd-field-border-hover:#4a3bc8;
  --bd-bar-bg:#fff3e8; --bd-bar-blur:0px; --bd-bar-r:999px; --bd-bar-sh:var(--bd-sh-3);
  --bd-ease-press:cubic-bezier(.3,.7,.4,1); --bd-ease-settle:cubic-bezier(.3,1.7,.5,1);
}

/* ================= 3. PAPER CUT (stacked matte stock) =================
   Layers of coloured paper. No gradients, no gloss. Structure is the shadow each sheet casts on the sheet below: a tight dark line (contact)
   plus a soft wider one (height). Height tiers: 1 = chip, 2 = card, 3 = modal. Cut-outs (fields) show the stock beneath with a top inner shadow.
   Hand-cut: radii vary per corner, section edges are scissor-cut zigzags, nothing is perfectly level. */


/* ================= 3. FROST (glass slabs over a slow colour field) =================
   Ground: a pale colour field with three slow blobs (paused under reduced motion). Surfaces: white glass, blur 22px + saturate, 1px inner rim
   (top-left bright), a soft long shadow. Controls are lenses: no hard borders except the AA contour on fields and tracks.
   Contrast is proven against the WORST backdrop (--fr-worst) not the average one; glass alpha floors at .62 for text-bearing surfaces. */
html[data-theme="frost"]{
  --bd-theme-name:"Frost"; --bd-scheme:light;
  --fr-ink:#0f1633; --fr-cobalt:#2b3fd6; --fr-mist:#cfd8f4; --fr-worst:#b9c6f0; --fr-aqua:#8fe3f0; --fr-rose:#f2b8d8; --fr-pane:rgba(255,255,255,.66);
  --bd-bg:#d5dcf4; --bd-bg-2:#cbd4f1; --bd-surface:rgba(255,255,255,.7); --bd-surface-2:rgba(255,255,255,.82); --bd-surface-3:rgba(255,255,255,.5);
  --bd-hero-bg:#cfd8f4;
  --bd-fg:#0f1633; --bd-fg-2:#1d2650; --bd-fg-3:#323c6b; --bd-fg-4:#414b7a;
  --bd-accent:#2b3fd6; --bd-accent-hi:#4358e6; --bd-accent-lo:#1f2fb0; --bd-accent-fg:#ffffff; --bd-accent-text:#2234b8;
  --bd-error:#a8201a; --bd-ok:#0f6b3a;
  --bd-border:rgba(255,255,255,.7); --bd-border-2:rgba(15,22,51,.22); --bd-border-strong:#4f5a8c;
  --bd-ring:0 0 0 2px #ffffff,0 0 0 5px #0f1633;
  --bd-scrim:rgba(15,22,51,.4);
  --bd-r-xs:8px; --bd-r-sm:12px; --bd-r-md:16px; --bd-r-lg:22px; --bd-r-xl:30px; --bd-r-pill:999px;
  --bd-sh-ring:inset 0 0 0 1px rgba(255,255,255,.75); --bd-sh-0:inset 0 0 0 1px rgba(255,255,255,.75);
  --bd-sh-1:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 4px 14px -4px rgba(31,47,176,.22);
  --bd-sh-2:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 10px 30px -8px rgba(31,47,176,.28);
  --bd-sh-3:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 20px 50px -12px rgba(31,47,176,.34);
  --bd-sh-modal:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),0 40px 90px -20px rgba(15,22,51,.5);
  --bd-sh-inset:inset 0 2px 5px rgba(15,22,51,.14);
  --bd-sh-btn:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6),0 2px 10px -2px rgba(31,47,176,.25);
  --bd-sh-btn-primary:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px -6px rgba(31,47,176,.6);
  --bd-sans:var(--bd-p-sans-modern); --bd-display:var(--bd-p-sans-modern);
  --bd-fw-display:700; --bd-fw-head:700; --bd-fw-ui:600; --bd-ls-display:-.04em; --bd-ls-head:-.03em;
  --bd-ctl-h:44px; --bd-ctl-h-lg:52px; --bd-ctl-r:999px; --bd-ctl-px:22px;
  --bd-field-bg:rgba(255,255,255,.8); --bd-field-border:#4f5a8c; --bd-field-border-hover:#2234b8;
  --bd-bar-bg:rgba(255,255,255,.62); --bd-bar-blur:24px; --bd-bar-r:999px; --bd-bar-sh:var(--bd-sh-3);
  --bd-ease-standard:cubic-bezier(.2,0,0,1); --bd-ease-out:cubic-bezier(.12,.9,.2,1);
}

/* ================= 3. RETRO (v4, 16-bit) =================
   Dark navy sky, cream plates, 4px pixel outlines, 2-tone bevels, hard offset shadows, no radius.
   Pixel font for headings/HUD/buttons only, never under 12px CSS; body is system sans at 16px+ (Brian's a11y rule).
   All pairs verified AA: cream on navy 12.9:1, cream on sky0 16.4:1, ink on cream 14.6:1, yellow on navySh 12.3:1,
   ink on orange plate 8.0:1, link blue on navy 9.3:1. Palette from Zephyrus. */
html[data-theme="retro"]{
  --bd-theme-name:"Retro"; --bd-scheme:dark;
  --bd-px:4px;
  --bd-bg:#07082a; --bd-bg-2:#10123f; --bd-surface:#20214e; --bd-surface-2:#2a2c66; --bd-surface-3:#111030;
  --bd-hero-bg:#07082a;
  --bd-fg:#fbf1d6; --bd-fg-2:#fbf1d6; --bd-fg-3:#d9cfb8; --bd-fg-4:#bfb5a2;
  --bd-accent:#ff8a1f; --bd-accent-hi:#ffc266; --bd-accent-lo:#b8500a; --bd-accent-fg:#1a1022; --bd-accent-text:#ffc266;
  --bd-error:#ff8a7a; --bd-ok:#9af07a;
  --bd-border:#4a4c9a; --bd-border-2:#fbf1d6; --bd-border-strong:#fbf1d6;
  --bd-ring:0 0 0 4px #f9d423,0 0 0 8px #140a10;
  --bd-scrim:rgba(7,8,42,.8);
  --bd-flag-bg:#111030; --bd-flag-fg:#f9d423;
  --bd-r-xs:0; --bd-r-sm:0; --bd-r-md:0; --bd-r-lg:0; --bd-r-xl:0; --bd-r-pill:0;
  --bd-sh-ring:0 0 0 4px #4a4c9a;
  --bd-sh-0:0 0 0 4px #4a4c9a;
  --bd-sh-1:inset 4px 4px 0 #4a4c9a,inset -4px -4px 0 #111030,0 0 0 4px #fbf1d6,4px 4px 0 4px #140a10;
  --bd-sh-2:var(--bd-sh-1);
  --bd-sh-3:var(--bd-sh-1);
  --bd-sh-modal:inset 4px 4px 0 #4a4c9a,inset -4px -4px 0 #111030,0 0 0 4px #fbf1d6,8px 8px 0 4px #140a10;
  --bd-sh-inset:inset 4px 4px 0 #111030,inset -4px -4px 0 #4a4c9a;
  --bd-sh-btn:inset 3px 3px 0 #4a4c9a,inset -3px -3px 0 #111030,0 0 0 4px #140a10,4px 4px 0 4px #140a10;
  --bd-sh-btn-primary:inset 3px 3px 0 #ffc266,inset -3px -3px 0 #b8500a,0 0 0 4px #140a10,4px 4px 0 4px #140a10;
  --bd-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bd-display:var(--bd-p-pixel); --bd-mono:var(--bd-p-pixel);
  --bd-fs-display:clamp(22px,2.4vw,34px); --bd-fs-h1:clamp(20px,2vw,28px); --bd-fs-h2:clamp(16px,1.6vw,22px); --bd-fs-h3:14px;
  --bd-fs-label:12px; --bd-fs-label-lg:12px; --bd-fs-body:17px; --bd-fs-small:15px;
  --bd-lh-display:1.5; --bd-lh-head:1.5; --bd-lh-body:1.65;
  --bd-ls-display:0; --bd-ls-head:0; --bd-ls-label:0; --bd-label-case:uppercase;
  --bd-fw-display:400; --bd-fw-head:400; --bd-fw-ui:400;
  --bd-font-feat:normal;
  --bd-ctl-h:44px; --bd-ctl-r:0;
  --bd-field-bg:#111030; --bd-field-border:#fbf1d6; --bd-field-border-hover:#f9d423;
  --bd-bar-bg:#111030; --bd-bar-blur:0px; --bd-bar-r:0;
  --bd-ease-standard:steps(4,end); --bd-ease-out:steps(4,end); --bd-ease-in:steps(4,end); --bd-ease-press:steps(2,end); --bd-ease-settle:steps(4,end);
}

@media (prefers-reduced-motion:reduce){
  :root,html[data-theme]{--bd-dur-instant:1ms;--bd-dur-fast:1ms;--bd-dur-base:1ms;--bd-dur-slow:1ms;--bd-dur-scene:1ms}
}