@layer reset, tokens, theme, theme-site-type, theme-site, archetype, page, override;

@layer reset {
/* heal-theming Round 1 / Phase 01 architecture B — ticket heal-theming-01-080
 * ─────────────────────────────────────────────────────────────────────────
 *   tier2_canonical_count: 217
 *   tier2_canonical_sha256: 97ffc6bb783b57948eb039ac913cd58433b0ef58e2b03563eee5e0633fcdd4a6
 * ─────────────────────────────────────────────────────────────────────────
 * The fields above are recomputed by `scripts/regen-base-css-header.ts` (a
 * deterministic generator over `TIER2_CANONICAL_NAMES` in
 * `src/themes/tokens/tier2.ts`). The Vitest assertion in
 * `tests/unit/themes/tokens/tier2-base-css-coverage.test.ts` recomputes the
 * sha at test time and fails if the file drifts. Edit `tier2.ts`, regenerate
 * the header, regenerate the Tier-2 defaults below.
 */
/*
 * themes/_base.css — Tier-1 primitives + Tier-2 canonical-vocabulary defaults
 *
 * Round 9 (heal-R9-T2). Source of truth: src/themes/tokens/tier2.ts.
 *
 * Loaded ONCE before any per-theme override. Every per-theme
 * `themes/<slug>/theme.css` overrides ONLY Tier-2 semantic tokens at
 * `[data-theme="<slug>"]` scope. Components (Tier-3) read Tier-2 only —
 * never reach into Tier-1 primitives. `var(--token, fallback)` fallbacks are
 * banned (defeats token resolution).
 *
 * Every primary token in TIER2 (src/themes/tokens/tier2.ts) carries a
 * default declaration here so no Tier-2 name resolves to the empty string
 * at runtime. Polarity-flipping tokens (polarity: invert-L | mix-black |
 * mix-white) carry an explicit override in the
 * [data-color-scheme="dark"] block; the lab-receiver MutationObserver in
 * assets/platform/lab-receiver.js depends on a non-empty --bg-base parse.
 *
 * Section order:
 *   1.  @property registrations (animatable Tier-2)
 *   2.  :root — Tier-1 primitives
 *   3.  :root — Tier-2 canonical defaults (light polarity)
 *   4.  :root — Legacy aliases → canonical
 *   5.  :root[data-color-scheme="light"] — explicit light pin
 *   6.  [data-color-scheme="dark"] :root — dark polarity overrides
 *   7.  @supports (color: oklch(from black l c h)) — relative-color refinements
 *   8.  @keyframes catalog (dh-marquee | dh-pulse | dh-shimmer | dh-breathe | dh-orbit)
 *   9.  @media (prefers-reduced-motion)
 *   10. @media (prefers-contrast: more)
 *   11. @media (forced-colors: active)
 *   12. .site-nav mobile-drawer primitive (preserved verbatim)
 *
 * PRD §9.1 (3-tier architecture)
 * PRD §9.5 (fluid typography clamp ramp)
 * PRD §9.6 (auto-invert formula L_dark = clamp(1 - L_light, 0.135, 0.975), C_dark = C × 0.85)
 * PRD §9.7 (FOUC IIFE handshake — see assets/platform/fouc.js)
 * PRD §9.8 (@property registrations)
 * PRD §9.9 (reduced-motion / forced-colors / prefers-contrast)
 */

/* ─────────────────────────────────────────────────────────────────────── */
/* 1. §9.8 — Animatable Tier-2 token registrations                         */
/*    Preserved verbatim. Domendor view-transition + theme-lab cross-fade  */
/*    rely on @property to interpolate these tokens at the CSSOM layer.    */
/* ─────────────────────────────────────────────────────────────────────── */

@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(0.6 0.18 250);
}
@property --accent-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(0.72 0.14 250);
}
@property --motion-duration {
  syntax: '<time>';
  inherits: true;
  initial-value: 240ms;
}
@property --shape-radius {
  syntax: '<length>';
  inherits: true;
  initial-value: 12px;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 2. Tier-1 primitives — `--p-*`                                          */
/*    Components NEVER read these. Only Tier-2 semantics may reference     */
/*    them. All color primitives in OKLCH; ramp follows fixed L stops      */
/*    0.975 / 0.95 / 0.90 / 0.82 / 0.72 / 0.60 / 0.50 / 0.40 / 0.30 / 0.20 */
/*    / 0.135 (PRD §9.2 / dev-standards §6.3).                             */
/* ─────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  /* Neutral ramp (gray) */
  --p-color-neutral-50:  oklch(0.975 0 0);
  --p-color-neutral-100: oklch(0.95  0 0);
  --p-color-neutral-200: oklch(0.90  0 0);
  --p-color-neutral-300: oklch(0.82  0 0);
  --p-color-neutral-400: oklch(0.72  0 0);
  --p-color-neutral-500: oklch(0.60  0 0);
  --p-color-neutral-600: oklch(0.50  0 0);
  --p-color-neutral-700: oklch(0.40  0 0);
  --p-color-neutral-800: oklch(0.30  0 0);
  --p-color-neutral-900: oklch(0.20  0 0);
  --p-color-neutral-950: oklch(0.135 0 0);

  /* Accent ramp (blue) */
  --p-color-accent-50:  oklch(0.975 0.012 250);
  --p-color-accent-100: oklch(0.95  0.030 250);
  --p-color-accent-200: oklch(0.90  0.060 250);
  --p-color-accent-300: oklch(0.82  0.110 250);
  --p-color-accent-400: oklch(0.72  0.155 250);
  --p-color-accent-500: oklch(0.60  0.180 250);
  --p-color-accent-600: oklch(0.50  0.170 250);
  --p-color-accent-700: oklch(0.40  0.150 250);
  --p-color-accent-800: oklch(0.30  0.115 250);
  --p-color-accent-900: oklch(0.20  0.080 250);
  --p-color-accent-950: oklch(0.135 0.050 250);

  /* Status — success (green) */
  --p-color-success-100: oklch(0.95 0.045 150);
  --p-color-success-500: oklch(0.55 0.140 150);
  --p-color-success-700: oklch(0.40 0.120 150);
  --p-color-success-900: oklch(0.20 0.080 150);

  /* Status — warn (amber) */
  --p-color-warn-100: oklch(0.95 0.060 75);
  --p-color-warn-500: oklch(0.62 0.170 75);
  --p-color-warn-700: oklch(0.45 0.150 75);
  --p-color-warn-900: oklch(0.25 0.090 75);

  /* Status — error (red) */
  --p-color-error-100: oklch(0.95 0.055 25);
  --p-color-error-500: oklch(0.58 0.210 25);
  --p-color-error-700: oklch(0.42 0.190 25);
  --p-color-error-900: oklch(0.22 0.110 25);

  /* Status — info (blue) */
  --p-color-info-100: oklch(0.95 0.045 240);
  --p-color-info-500: oklch(0.58 0.160 240);
  --p-color-info-700: oklch(0.42 0.150 240);
  --p-color-info-900: oklch(0.22 0.090 240);

  /* Spacing — 4px base ramp */
  --p-space-0:  0px;
  --p-space-1:  4px;
  --p-space-2:  8px;
  --p-space-3:  12px;
  --p-space-4:  16px;
  --p-space-5:  20px;
  --p-space-6:  24px;
  --p-space-8:  32px;
  --p-space-10: 40px;
  --p-space-12: 48px;
  --p-space-16: 64px;
  --p-space-20: 80px;
  --p-space-24: 96px;
  --p-space-32: 128px;

  /* Radius primitives */
  --p-radius-none: 0px;
  --p-radius-sm:   4px;
  --p-radius-md:   8px;
  --p-radius-lg:   12px;
  --p-radius-xl:   16px;
  --p-radius-2xl:  24px;
  --p-radius-pill: 9999px;

  /* Shadow primitives — minimal-soft default ramp */
  --p-shadow-1: 0 1px 2px rgba(0,0,0,0.05);
  --p-shadow-2: 0 2px 4px rgba(0,0,0,0.06);
  --p-shadow-3: 0 4px 8px rgba(0,0,0,0.08);
  --p-shadow-4: 0 8px 16px rgba(0,0,0,0.10);
  --p-shadow-5: 0 16px 32px rgba(0,0,0,0.12);
  --p-shadow-6: 0 24px 48px rgba(0,0,0,0.16);

  /* Z-index primitives */
  --p-z-0: 0;
  --p-z-1: 10;
  --p-z-2: 20;
  --p-z-3: 30;
  --p-z-4: 40;
  --p-z-5: 50;
  --p-z-6: 60;
  --p-z-7: 70;
  --p-z-8: 80;
  --p-z-9: 90;

  /* Typography size primitives */
  --p-size-xs:  0.75rem;
  --p-size-sm:  0.875rem;
  --p-size-md:  1rem;
  --p-size-lg:  1.125rem;
  --p-size-xl:  1.25rem;
  --p-size-2xl: 1.5rem;
  --p-size-3xl: 1.875rem;

  --p-line-height-tight:    1.15;
  --p-line-height-snug:     1.3;
  --p-line-height-base:     1.5;
  --p-line-height-relaxed:  1.65;
  --p-line-height-loose:    1.8;

  --p-font-weight-300: 300;
  --p-font-weight-400: 400;
  --p-font-weight-500: 500;
  --p-font-weight-600: 600;
  --p-font-weight-700: 700;
  --p-font-weight-800: 800;
  --p-font-weight-900: 900;

  --p-letter-spacing-tight:  -0.01em;
  --p-letter-spacing-normal:  0em;
  --p-letter-spacing-wide:    0.04em;
  --p-letter-spacing-wider:   0.10em;

  --p-duration-fast:   120ms;
  --p-duration-base:   240ms;
  --p-duration-slow:   400ms;
  --p-duration-slower: 1.6s;

  --p-easing-in:          cubic-bezier(.4,0,1,1);
  --p-easing-out:         cubic-bezier(.2,.7,.2,1);
  --p-easing-emphasized:  cubic-bezier(.4,1.4,.6,1);
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 3. Tier-2 canonical defaults — light polarity (15 categories, 204 tokens) */
/*    Mirrors src/themes/tokens/tier2.ts TIER2 export, in declaration order. */
/*    Primitive-first ordering: tokens that other tokens var()-reference    */
/*    are declared above their consumers.                                   */
/* ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface ladder (12) ─────────────────────────────────────────── */
  --bg-base: oklch(0.985 0.002 270);
  --bg-elevated: oklch(0.97 0.003 270);
  --bg-surface: var(--bg-elevated);
  --bg-surface-raised: color-mix(in oklab, var(--bg-elevated), white 5%);
  --bg-surface-overlay: oklch(0.995 0.001 270);
  --bg-muted: oklch(0.94 0.005 270);
  --bg-deep: oklch(0.92 0.005 270);
  --bg-input: oklch(1 0 0);
  --bg-inverse: oklch(0.13 0.008 270);
  --bg-page: var(--bg-base);
  /* --bg-glass uses a pre-blended OKLCH at the unguarded layer; the
     @supports block below refines it via relative-color syntax. */
  --bg-glass: oklch(0.97 0.003 270 / 0.72);
  --bg-scrim-page: oklch(0.13 0 0 / 0.55);

  /* ─── Foreground (12) ─────────────────────────────────────────────── */
  --fg-default: oklch(0.20 0.008 270);
  --fg-muted: oklch(0.45 0.006 270);
  --fg-subtle: oklch(0.58 0.004 270);
  --fg-faint: oklch(0.72 0.003 270);
  --fg-inverted: oklch(0.97 0.002 270);
  --fg-on-accent: oklch(0.99 0 0);
  --fg-on-elevated: var(--fg-default);
  --fg-input: var(--fg-default);
  --fg-warm: oklch(0.22 0.020 50);
  --fg-error: oklch(0.42 0.190 25);
  --fg-success: oklch(0.40 0.120 150);
  --fg-warning: oklch(0.45 0.150 75);

  /* [heal-R16-T-A] AA contrast floor — Tier-2 semantic aliases binding to */
  /* existing canonical tokens; no new primitive values. */
  --color-fg-on-bg: var(--fg-default);            /* [heal-R16-T-A] */
  --color-fg-on-surface: var(--fg-default);       /* [heal-R16-T-A] */
  --color-fg-on-accent: var(--fg-on-accent);      /* [heal-R16-T-A] */
  --color-fg-muted-on-bg: var(--fg-muted);        /* [heal-R16-T-A] */
  --color-border-on-bg: var(--border-default);    /* [heal-R16-T-A] */

  /* ─── Accent (16) ─────────────────────────────────────────────────── */
  --accent: oklch(0.60 0.180 250);
  --accent-2: oklch(0.72 0.155 250);
  --accent-3: oklch(0.78 0.130 250);
  --accent-4: oklch(0.82 0.110 250);
  --accent-hover: oklch(0.50 0.170 250);
  --accent-active: oklch(0.40 0.150 250);
  --accent-disabled: oklch(0.78 0.060 250);
  --accent-soft: oklch(0.95 0.030 250);
  --accent-ink: oklch(0.20 0.080 250);
  --accent-fg: var(--fg-on-accent);
  /* --accent-glow: precomputed at unguarded layer; @supports block
     refines via oklch(from var(--accent) l c h / 0.45). */
  --accent-glow: oklch(0.60 0.180 250 / 0.45);
  --accent-warm: oklch(0.72 0.150 60);
  --accent-cool: oklch(0.72 0.110 200);
  --accent-highlight: oklch(0.85 0.150 95);
  --accent-positive: oklch(0.65 0.150 145);
  --accent-danger: oklch(0.58 0.210 25);

  /* ─── Borders + lines (10) ───────────────────────────────────────── */
  --border-subtle: oklch(0.92 0.005 270);
  --border-default: oklch(0.85 0.005 270);
  --border-strong: oklch(0.65 0.005 270);
  --border-accent: var(--accent);
  --border-focus: var(--accent);
  --border-input: var(--border-default);
  --border-input-focus: var(--accent);
  --line: var(--border-subtle);
  --line-2: var(--border-default);
  --ring: var(--accent);

  /* ─── Shadows (14) ────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px oklch(0.13 0 0 / 0.05);
  --shadow-2: 0 2px 4px oklch(0.13 0 0 / 0.06);
  --shadow-3: 0 4px 8px oklch(0.13 0 0 / 0.08);
  --shadow-4: 0 8px 16px oklch(0.13 0 0 / 0.10);
  --shadow-5: 0 16px 32px oklch(0.13 0 0 / 0.12);
  --shadow-6: 0 24px 48px oklch(0.13 0 0 / 0.16);
  --shadow-card-rest: var(--shadow-2);
  --shadow-card-hover: var(--shadow-3);
  --shadow-modal: var(--shadow-5);
  --shadow-popover: var(--shadow-4);
  --shadow-hard-offset: 4px 4px 0 oklch(0.13 0 0);
  --shadow-sticker: 2px 3px 0 oklch(0.13 0 0 / 0.18);
  --shadow-glow-accent: 0 0 24px var(--accent-glow);
  --shadow-inset-emboss: inset 0 1px 0 oklch(1 0 0 / 0.04), inset 0 -1px 0 oklch(0.13 0 0 / 0.06);

  /* ─── Gradients (8) ───────────────────────────────────────────────── */
  --gradient-accent-linear: linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-accent-radial: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
  --gradient-accent-conic: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  --gradient-surface-elevated: linear-gradient(180deg, var(--bg-elevated), var(--bg-base));
  /* --gradient-chrome-fade: precomputed at unguarded layer; @supports
     block refines via oklch(from var(--bg-elevated) l c h / 0). */
  --gradient-chrome-fade: linear-gradient(180deg, var(--bg-elevated), oklch(0.97 0.003 270 / 0));
  --gradient-glow-accent: radial-gradient(circle, var(--accent-glow), transparent 60%);
  --gradient-noise-overlay: none;
  --gradient-vignette-radial: radial-gradient(ellipse at center, transparent 50%, oklch(0.13 0 0 / 0.25));

  /* ─── Scrims + glass (6) ──────────────────────────────────────────── */
  --scrim-strong: oklch(0.13 0 0 / 0.65);
  --scrim-soft: oklch(0.13 0 0 / 0.35);
  --scrim-inverted: oklch(0.99 0 0 / 0.55);
  /* --scrim-nav: precomputed at unguarded layer; @supports refines via
     oklch(from var(--bg-base) l c h / 0.85). */
  --scrim-nav: oklch(0.985 0.002 270 / 0.85);
  --glass-blur: blur(12px) saturate(140%);
  --blur-amount: 12px;

  /* ─── Glows (5) ───────────────────────────────────────────────────── */
  --glow-accent: 0 0 16px var(--accent-glow);
  /* --glow-soft / --glow-strong / --glow-focus / --text-glow:
     precomputed at unguarded layer; @supports refines via
     relative-color syntax against --accent / --ring. */
  --glow-soft: 0 8px 24px oklch(0.60 0.180 250 / 0.18);
  --glow-strong: 0 0 48px var(--accent-glow), 0 0 8px var(--accent);
  --glow-focus: 0 0 0 4px oklch(0.60 0.180 250 / 0.35);
  --text-glow: 0 0 12px var(--accent-glow);

  /* ─── Status (12) ────────────────────────────────────────────────── */
  --status-success-fg: oklch(0.40 0.120 150);
  --status-success-bg: oklch(0.95 0.045 150);
  --status-success-border: oklch(0.78 0.090 150);
  --status-info-fg: oklch(0.42 0.150 240);
  --status-info-bg: oklch(0.95 0.045 240);
  --status-info-border: oklch(0.78 0.090 240);
  --status-warning-fg: oklch(0.45 0.150 75);
  --status-warning-bg: oklch(0.95 0.060 75);
  --status-warning-border: oklch(0.78 0.110 75);
  --status-error-fg: oklch(0.42 0.190 25);
  --status-error-bg: oklch(0.95 0.055 25);
  --status-error-border: oklch(0.78 0.130 25);

  /* ─── Typography — faces (8) ─────────────────────────────────────── */
  --font-display: ui-sans-serif, system-ui, sans-serif;
  --font-heading: var(--font-display);
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-condensed: var(--font-display);
  --font-script: var(--font-display);
  --font-stamp: var(--font-display);
  --font-arcade: var(--font-mono);

  /* ─── Typography — display ramp (4) ──────────────────────────────── */
  --type-display-1: clamp(3rem, 2rem + 5vw, 6rem);
  --type-display-2: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem);
  --type-display-3: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --type-hero: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);

  /* ─── Typography — body ramp (7) ─────────────────────────────────── */
  --type-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);
  --type-sm: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --type-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --type-lg: clamp(1.125rem, 1.05rem + 0.45vw, 1.25rem);
  --type-h1: clamp(1.875rem, 1.50rem + 1.875vw, 3.5rem);
  --type-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --type-h3: clamp(1.25rem, 1.10rem + 0.75vw, 1.5rem);

  /* ─── Typography — tracking / leading / measure (3) ───────────────── */
  --ui-letter-spacing-extra-wide: 0.18em;
  --lh-body: 1.55;
  --measure-narrow: 45ch;

  /* ─── Spacing — numeric ladder (13) ──────────────────────────────── */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── Spacing — named aliases + section + page-margin + flex/grid (11) ─ */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-20);
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);
  --space-page-margin: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --space-loose: clamp(1.5rem, 2.5vw, 2.5rem);
  --space-tight: clamp(0.5rem, 1vw, 0.75rem);
  --responsive-flex-gap: var(--space-4);
  --responsive-grid-gap: var(--space-4);

  /* Spacing scale coefficient (per-theme density override) */
  --space-scale: 1;

  /* ─── Radius (10) ────────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --radius-full: 9999px;
  --radius-card: var(--radius-md);
  --radius-chip: var(--radius-pill);
  --radius-subtle: var(--radius-sm);
  --radius-arch: 50% 50% 0 0 / 100% 100% 0 0;

  /* ─── Motion — durations + eases (10) ────────────────────────────── */
  --motion-duration: 240ms;
  --motion-duration-fast: 120ms;
  --motion-duration-medium: 240ms;
  --motion-duration-slow: 400ms;
  --motion-duration-instant: 60ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.4, 1.4, 0.6, 1);
  --motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Motion — long-form animation durations (5) ─────────────────── */
  --marquee-duration: 30s;
  --pulse-duration: 1.6s;
  --shimmer-duration: 2.4s;
  --breathe-duration: 4s;
  --orbit-duration: 60s;

  /* Documentation-only sentinel — lists @keyframes names emitted below. */
  --motion-keyframe-catalog: "dh-marquee dh-pulse dh-shimmer dh-breathe dh-orbit";

  /* ─── Z-index (8) ────────────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-popover: 600;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ─── Decorations (8) — data-URI SVG textures + gradient patterns ── */
  --decoration-scanline-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><line x1='0' y1='2' x2='4' y2='2' stroke='currentColor' stroke-opacity='0.05'/></svg>");
  --decoration-paper-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='80' height='80' filter='url(%23n)' opacity='0.06'/></svg>");
  --decoration-halftone-bg: radial-gradient(circle, oklch(0.13 0 0 / 0.08) 1px, transparent 1.5px) 0 0 / 8px 8px;
  --decoration-noise-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2' numOctaves='1'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.04'/></svg>");
  --decoration-grid-bg: linear-gradient(oklch(0.13 0 0 / 0.04) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, oklch(0.13 0 0 / 0.04) 1px, transparent 1px) 0 0 / 24px 24px;
  --decoration-stripe-bg: repeating-linear-gradient(45deg, transparent 0, transparent 8px, oklch(0.13 0 0 / 0.04) 8px, oklch(0.13 0 0 / 0.04) 12px);
  --decoration-dot-bg: radial-gradient(circle, oklch(0.13 0 0 / 0.10) 1.5px, transparent 1.5px) 0 0 / 16px 16px;
  --decoration-crosshatch-bg: repeating-linear-gradient(45deg, transparent 0, transparent 4px, oklch(0.13 0 0 / 0.05) 4px, oklch(0.13 0 0 / 0.05) 5px), repeating-linear-gradient(-45deg, transparent 0, transparent 4px, oklch(0.13 0 0 / 0.05) 4px, oklch(0.13 0 0 / 0.05) 5px);

  /* ─── Ancient-compat orphans (not yet retired; canonical primaries in
         tier2.ts; many tier-3 + archetype selectors still grep them) ─── */
  --shape-radius: var(--radius-md);
  --chrome-bg: var(--bg-base);
  --fg-default-hi: oklch(0.05 0 0);
  --bg-base-hi: oklch(0.99 0 0);
  --accent-rgb: var(--accent);
  --measure-prose: 70ch;
  --measure-wide: 88ch;
  --bg-tile: oklch(0.20 0.008 270);
  --bg-foot: oklch(0.17 0.008 270);
  --bg-iframe: oklch(0.985 0.002 270);
  --bg-shimmer-a: oklch(0.95 0.003 270);
  --bg-shimmer-b: oklch(0.985 0.002 270);
  --shadow-elev1: var(--shadow-1);
  --ui-letter-spacing-tight: -0.01em;
  --ui-letter-spacing-normal: 0em;
  --ui-letter-spacing-wide: 0.04em;
  --lh-tight: 1.15;
  --lh-loose: 1.8;
  --lh-heading: var(--lh-tight);

  /* ─── Legacy non-Tier-2 primitives still consumed by archetypes ──── */
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--border-subtle);
  --surface-bg: var(--bg-elevated);
  --surface-border: var(--border-default);
  --chrome-border: var(--border-default);
  --shape-shadow-emboss: var(--shadow-inset-emboss);

  /* Breakpoint tokens — documentation only. CSS `@media` queries require
     literal pixel values (CSS variables are not resolvable inside media
     conditions). Use the literals 480, 768, 1024, 1440 only — enforced
     by scripts/validate-responsive.ts. */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1440px;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 4. Legacy aliases — every name in LEGACY_ALIASES (tier2.ts) plus the    */
/*    per-entry legacyAliases lists, resolving to its canonical token so   */
/*    old vocabulary keeps painting without rewrites.                      */
/* ─────────────────────────────────────────────────────────────────────── */

:root {
  /* Surface ladder aliases */
  --bg-0: var(--bg-base);
  --bg-default: var(--bg-base);
  --bg-1: var(--bg-elevated);
  --bg-elev: var(--bg-elevated);
  --surface-elevated: var(--bg-elevated);
  --bg-surface-elevated: var(--bg-elevated);
  --bg-2: var(--bg-surface);
  --surface-2: var(--bg-surface);
  --bg-3: var(--bg-deep);
  --bg-sunk: var(--bg-deep);
  --bg-inset: var(--bg-deep);
  --bg-surface-dark: var(--bg-inverse);
  --bg-overlay: var(--bg-inverse);
  --bg-nav: var(--chrome-bg);

  /* heal-R14 — canonical defaults for under-declared Tier-2 names */
  --surface-1: var(--bg-base);
  --surface-3: var(--bg-deep);
  --hero-bg: var(--bg-base);
  --hero-text: var(--fg-default);
  --hero-cta-bg: var(--accent);
  --hero-cta-fg: var(--fg-on-accent);
  --hero-min-h: clamp(420px, 60vh, 720px);
  --nav-menu-bg: var(--chrome-bg);
  --nav-menu-fg: var(--fg-default);
  --nav-toggle-icon-color: var(--fg-default);
  --space-section-y: var(--space-16);
  --s: var(--space-4);
  --type-display: var(--type-display-1);

  /* Foreground aliases */
  --fg-2: var(--fg-muted);
  --fg-inverse: var(--fg-inverted);
  --fg-on-dark: var(--fg-inverted);
  --fg-danger: var(--fg-error);
  --accent-foreground: var(--fg-on-accent);

  /* Accent aliases */
  --accent2: var(--accent-2);
  --accent3: var(--accent-3);
  --accent-blue: var(--accent-2);
  --accent-alt: var(--accent-4);
  --accent-dark: var(--accent-active);
  --accent-deep: var(--accent-ink);
  --accent-gold: var(--accent-warm);

  /* Shadow aliases */
  --shadow-card: var(--shadow-card-rest);
  --shadow-sticker-legacy: var(--shadow-sticker);
  --shadow-card-elevated: var(--shadow-card-hover);
  --shadow-md: var(--shadow-card-hover);
  --shadow-lg: var(--shadow-modal);
  --shadow-hard: var(--shadow-hard-offset);
  --shadow-hard-lg: var(--shadow-hard-offset);
  --shadow-hard-accent: var(--shadow-hard-offset);
  --shadow-accent: var(--shadow-glow-accent);

  /* Motion aliases */
  --motion-base: var(--motion-duration);
  --motion-duration-default: var(--motion-duration);
  --motion-fast: var(--motion-duration-fast);
  --motion-slow: var(--motion-duration-slow);
  --motion-easing: var(--motion-ease);

  /* Status aliases (shorthand) */
  --status-warn-fg: var(--status-warning-fg);
  --status-warn-bg: var(--status-warning-bg);
  --bg-warning-subtle: var(--status-warning-bg);
  --bg-error-subtle: var(--status-error-bg);

  /* Z-index aliases */
  --ui-z-overlay: var(--z-overlay);
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 5. Explicit light pin — mirrors :root defaults at higher selector       */
/*    specificity (0,2,0 from :root[data-color-scheme="light"]). Required  */
/*    so that pages with dark-first theme.css declarations can still snap  */
/*    back to light via attribute toggle.                                  */
/* ─────────────────────────────────────────────────────────────────────── */

[data-color-scheme="light"] :root,
:root[data-color-scheme="light"] {
  /* Surface ladder — light polarity */
  --bg-base: oklch(0.985 0.002 270);
  --bg-elevated: oklch(0.97 0.003 270);
  --bg-surface: var(--bg-elevated);
  --bg-surface-raised: color-mix(in oklab, var(--bg-elevated), white 5%);
  --bg-surface-overlay: oklch(0.995 0.001 270);
  --bg-muted: oklch(0.94 0.005 270);
  --bg-deep: oklch(0.92 0.005 270);
  --bg-input: oklch(1 0 0);
  --bg-inverse: oklch(0.13 0.008 270);
  --bg-page: var(--bg-base);
  --bg-glass: oklch(0.97 0.003 270 / 0.72);
  --scrim-inverted: oklch(0.99 0 0 / 0.55);
  --scrim-nav: oklch(0.985 0.002 270 / 0.85);

  /* Foreground — light polarity */
  --fg-default: oklch(0.20 0.008 270);
  --fg-muted: oklch(0.45 0.006 270);
  --fg-subtle: oklch(0.58 0.004 270);
  --fg-faint: oklch(0.72 0.003 270);
  --fg-inverted: oklch(0.97 0.002 270);
  --fg-warm: oklch(0.22 0.020 50);
  --fg-error: oklch(0.42 0.190 25);
  --fg-success: oklch(0.40 0.120 150);
  --fg-warning: oklch(0.45 0.150 75);

  /* Accent soft / ink + borders (invert-L family) */
  --accent-soft: oklch(0.95 0.030 250);
  --accent-ink: oklch(0.20 0.080 250);
  --border-subtle: oklch(0.92 0.005 270);
  --border-default: oklch(0.85 0.005 270);
  --border-strong: oklch(0.65 0.005 270);

  /* Status — light polarity */
  --status-success-fg: oklch(0.40 0.120 150);
  --status-success-bg: oklch(0.95 0.045 150);
  --status-success-border: oklch(0.78 0.090 150);
  --status-info-fg: oklch(0.42 0.150 240);
  --status-info-bg: oklch(0.95 0.045 240);
  --status-info-border: oklch(0.78 0.090 240);
  --status-warning-fg: oklch(0.45 0.150 75);
  --status-warning-bg: oklch(0.95 0.060 75);
  --status-warning-border: oklch(0.78 0.110 75);
  --status-error-fg: oklch(0.42 0.190 25);
  --status-error-bg: oklch(0.95 0.055 25);
  --status-error-border: oklch(0.78 0.130 25);

  /* Shadows that flip with polarity (hard-offset, sticker) */
  --shadow-hard-offset: 4px 4px 0 oklch(0.13 0 0);
  --shadow-sticker: 2px 3px 0 oklch(0.13 0 0 / 0.18);

  /* Gradient that flips with polarity (surface-elevated → bg-base) */
  --gradient-surface-elevated: linear-gradient(180deg, var(--bg-elevated), var(--bg-base));
  --gradient-chrome-fade: linear-gradient(180deg, var(--bg-elevated), oklch(0.97 0.003 270 / 0));

  /* High-contrast pair + ancient-compat hub surfaces */
  --fg-default-hi: oklch(0.05 0 0);
  --bg-base-hi: oklch(0.99 0 0);
  --bg-tile: oklch(0.20 0.008 270);
  --bg-foot: oklch(0.17 0.008 270);
  --bg-iframe: oklch(0.985 0.002 270);
  --bg-shimmer-a: oklch(0.95 0.003 270);
  --bg-shimmer-b: oklch(0.985 0.002 270);
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 6. Dark polarity overrides (PRD §9.6 auto-invert mirror).               */
/*    L_dark = clamp(1 - L_light, 0.135, 0.975); C_dark = C_light × 0.85.  */
/*    Applied to every token whose tier2.ts polarity is invert-L /         */
/*    mix-black / mix-white. per-theme tokens are left to theme.css.       */
/*                                                                         */
/*    Selector emits both [data-color-scheme="dark"] :root form (for sub-  */
/*    tree scoping when the attribute lives on a wrapper) and the          */
/*    :root[data-color-scheme="dark"] form (for the canonical lab-receiver */
/*    case where the attribute lives on <html>).                           */
/* ─────────────────────────────────────────────────────────────────────── */

[data-color-scheme="dark"] :root,
:root[data-color-scheme="dark"] {
  /* Surface ladder — dark inverted */
  --bg-base: oklch(0.135 0.0017 270);
  --bg-elevated: oklch(0.17 0.00255 270);
  --bg-surface: var(--bg-elevated);
  --bg-surface-raised: color-mix(in oklab, var(--bg-elevated), black 5%);
  --bg-surface-overlay: oklch(0.20 0.00085 270);
  --bg-muted: oklch(0.22 0.00425 270);
  --bg-deep: oklch(0.135 0.00425 270);
  --bg-input: oklch(0.20 0 0);
  --bg-inverse: oklch(0.87 0.0068 270);
  --bg-page: var(--bg-base);
  --bg-glass: oklch(0.17 0.00255 270 / 0.72);
  --scrim-inverted: oklch(0.135 0 0 / 0.55);
  --scrim-nav: oklch(0.135 0.0017 270 / 0.85);

  /* Foreground — dark inverted */
  --fg-default: oklch(0.80 0.0068 270);
  --fg-muted: oklch(0.55 0.0051 270);
  --fg-subtle: oklch(0.42 0.0034 270);
  --fg-faint: oklch(0.28 0.00255 270);
  --fg-inverted: oklch(0.135 0.0017 270);
  --fg-on-elevated: var(--fg-default);
  --fg-input: var(--fg-default);
  --fg-warm: oklch(0.78 0.017 50);
  --fg-error: oklch(0.78 0.1615 25);
  --fg-success: oklch(0.78 0.102 150);
  --fg-warning: oklch(0.78 0.1275 75);

  /* Accent — soft + ink invert; primary chrome left to theme.css */
  --accent-soft: oklch(0.22 0.0255 250);
  --accent-ink: oklch(0.80 0.068 250);

  /* Borders — dark inverted */
  --border-subtle: oklch(0.22 0.00425 270);
  --border-default: oklch(0.30 0.00425 270);
  --border-strong: oklch(0.45 0.00425 270);
  --border-input: var(--border-default);
  --line: var(--border-subtle);
  --line-2: var(--border-default);

  /* Status — dark inverted */
  --status-success-fg: oklch(0.78 0.102 150);
  --status-success-bg: oklch(0.22 0.038 150);
  --status-success-border: oklch(0.32 0.0765 150);
  --status-info-fg: oklch(0.78 0.1275 240);
  --status-info-bg: oklch(0.22 0.038 240);
  --status-info-border: oklch(0.32 0.0765 240);
  --status-warning-fg: oklch(0.78 0.1275 75);
  --status-warning-bg: oklch(0.22 0.051 75);
  --status-warning-border: oklch(0.32 0.0935 75);
  --status-error-fg: oklch(0.78 0.1615 25);
  --status-error-bg: oklch(0.22 0.047 25);
  --status-error-border: oklch(0.32 0.1105 25);

  /* Shadows that flip with polarity (hard-offset, sticker) — light cast */
  --shadow-hard-offset: 4px 4px 0 oklch(0.97 0 0);
  --shadow-sticker: 2px 3px 0 oklch(0.97 0 0 / 0.18);

  /* Gradient that flips with polarity — composes off inverted surfaces */
  --gradient-surface-elevated: linear-gradient(180deg, var(--bg-elevated), var(--bg-base));
  --gradient-chrome-fade: linear-gradient(180deg, var(--bg-elevated), oklch(0.17 0.00255 270 / 0));

  /* High-contrast pair — invert */
  --fg-default-hi: oklch(0.95 0 0);
  --bg-base-hi: oklch(0.135 0 0);

  /* Hub surfaces (BTE-imported internal.dev) */
  --bg-tile: oklch(0.80 0.0068 270);
  --bg-foot: oklch(0.83 0.0068 270);
  --bg-iframe: oklch(0.135 0.0017 270);
  --bg-shimmer-a: oklch(0.18 0.003 270);
  --bg-shimmer-b: oklch(0.22 0.002 270);

  /* Chrome / surface convenience aliases re-bind to inverted surfaces */
  --chrome-bg: var(--bg-base);
  --surface-bg: var(--bg-elevated);
  --border-color: var(--border-subtle);
  --surface-border: var(--border-default);
  --chrome-border: var(--border-default);
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 7. @supports — relative-color syntax refinement.                        */
/*    When the user agent supports oklch(from <token> l c h / <alpha>),    */
/*    redeclare the glass / scrim / glow / fade tokens through the         */
/*    upstream surface and accent tokens so per-theme overrides flow       */
/*    through automatically. Pre-blended fallbacks above remain for older  */
/*    engines (≤ Safari 16.3 / Chrome 118 / Firefox 117).                  */
/* ─────────────────────────────────────────────────────────────────────── */

@supports (color: oklch(from black l c h)) {
  :root {
    --bg-glass: oklch(from var(--bg-elevated) l c h / 0.72);
    --scrim-nav: oklch(from var(--bg-base) l c h / 0.85);
    --accent-glow: oklch(from var(--accent) l c h / 0.45);
    --gradient-chrome-fade: linear-gradient(180deg, var(--bg-elevated), oklch(from var(--bg-elevated) l c h / 0));
    --glow-soft: 0 8px 24px oklch(from var(--accent) l c h / 0.18);
    --glow-focus: 0 0 0 4px oklch(from var(--ring) l c h / 0.35);
  }

  [data-color-scheme="dark"] :root,
  :root[data-color-scheme="dark"] {
    --bg-glass: oklch(from var(--bg-elevated) l c h / 0.72);
    --scrim-nav: oklch(from var(--bg-base) l c h / 0.85);
    --accent-glow: oklch(from var(--accent) l c h / 0.45);
    --gradient-chrome-fade: linear-gradient(180deg, var(--bg-elevated), oklch(from var(--bg-elevated) l c h / 0));
    --glow-soft: 0 8px 24px oklch(from var(--accent) l c h / 0.18);
    --glow-focus: 0 0 0 4px oklch(from var(--ring) l c h / 0.35);
  }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 8. @keyframes catalog — five long-form animations referenced by the     */
/*    motion vocabulary (--marquee-duration / --pulse-duration etc.).      */
/*    Tier-3 components @composes these by name; the prefers-reduced-motion */
/*    block below disables every dh-* keyframe via animation-name: none.   */
/* ─────────────────────────────────────────────────────────────────────── */

@keyframes dh-marquee {
  /* HEAL-2026-V (R10): use the standalone `translate` property so RTL
     locales can flip the X term via a [dir=rtl] keyframe override without
     re-authoring the transform chain. translateX is physical in CSS;
     `translate` accepts the same axis vocabulary but composes cleanly with
     a future logical-translate override. */
  from { translate: 0 0; }
  to   { translate: -50% 0; }
}

@keyframes dh-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes dh-shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

@keyframes dh-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

@keyframes dh-orbit {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 9. §9.9 — A11y media-query block: prefers-reduced-motion.                */
/* ─────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-medium: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-instant: 0ms;
    --marquee-duration: 0s;
    --pulse-duration: 0s;
    --shimmer-duration: 0s;
    --breathe-duration: 0s;
    --orbit-duration: 0s;
  }

  /* Disable the five long-form keyframes anywhere they're applied. */
  *,
  *::before,
  *::after {
    animation-name: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 10. §9.9 — A11y media-query block: prefers-contrast: more.              */
/*     Bumps fg / border / ring to high-contrast pair tokens.              */
/* ─────────────────────────────────────────────────────────────────────── */

@media (prefers-contrast: more) {
  :root {
    --fg-default: var(--fg-default-hi);
    --fg-muted: var(--fg-default-hi);
    --fg-subtle: var(--fg-default-hi);
    --bg-base: var(--bg-base-hi);
    --bg-elevated: var(--bg-base-hi);
    --border-color: var(--fg-default-hi);
    --border-subtle: var(--fg-default-hi);
    --border-default: var(--fg-default-hi);
    --border-strong: var(--fg-default-hi);
    --line: var(--fg-default-hi);
    --line-2: var(--fg-default-hi);
    --ring: var(--fg-default-hi);
  }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 11. §9.9 — A11y media-query block: forced-colors: active.               */
/*     Override every Tier-2 colour token to a system color keyword; null  */
/*     gradients / glows / shadows so synthesized chrome doesn't fight the */
/*     user's high-contrast palette.                                       */
/* ─────────────────────────────────────────────────────────────────────── */

@media (forced-colors: active) {
  :root {
    /* Surface ladder */
    --bg-base: Canvas;
    --bg-elevated: Canvas;
    --bg-surface: Canvas;
    --bg-surface-raised: Canvas;
    --bg-surface-overlay: Canvas;
    --bg-muted: Canvas;
    --bg-deep: Canvas;
    --bg-input: Field;
    --bg-inverse: CanvasText;
    --bg-page: Canvas;
    --bg-glass: Canvas;
    --bg-scrim-page: CanvasText;

    /* Foreground */
    --fg-default: CanvasText;
    --fg-muted: CanvasText;
    --fg-subtle: CanvasText;
    --fg-faint: GrayText;
    --fg-inverted: Canvas;
    --fg-on-accent: HighlightText;
    --fg-on-elevated: CanvasText;
    --fg-input: FieldText;
    --fg-warm: CanvasText;
    --fg-error: CanvasText;
    --fg-success: CanvasText;
    --fg-warning: CanvasText;

    /* Accent */
    --accent: Highlight;
    --accent-2: Highlight;
    --accent-3: Highlight;
    --accent-4: Highlight;
    --accent-hover: Highlight;
    --accent-active: Highlight;
    --accent-disabled: GrayText;
    --accent-soft: Canvas;
    --accent-ink: CanvasText;
    --accent-fg: HighlightText;
    --accent-glow: transparent;
    --accent-warm: Highlight;
    --accent-cool: Highlight;
    --accent-highlight: Highlight;
    --accent-positive: Highlight;
    --accent-danger: Highlight;

    /* Borders */
    --border-subtle: CanvasText;
    --border-default: CanvasText;
    --border-strong: CanvasText;
    --border-accent: Highlight;
    --border-focus: Highlight;
    --border-input: CanvasText;
    --border-input-focus: Highlight;
    --line: CanvasText;
    --line-2: CanvasText;
    --ring: Highlight;
    --border-color: CanvasText;
    --surface-border: CanvasText;
    --chrome-border: CanvasText;

    /* Shadows + gradients + glows — neutralized */
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
    --shadow-4: none;
    --shadow-5: none;
    --shadow-6: none;
    --shadow-card-rest: none;
    --shadow-card-hover: none;
    --shadow-modal: none;
    --shadow-popover: none;
    --shadow-hard-offset: none;
    --shadow-sticker: none;
    --shadow-glow-accent: none;
    --shadow-inset-emboss: none;
    --shadow-elev1: none;
    --shape-shadow-emboss: none;

    --gradient-accent-linear: none;
    --gradient-accent-radial: none;
    --gradient-accent-conic: none;
    --gradient-surface-elevated: none;
    --gradient-chrome-fade: none;
    --gradient-glow-accent: none;
    --gradient-noise-overlay: none;
    --gradient-vignette-radial: none;

    --glow-accent: none;
    --glow-soft: none;
    --glow-strong: none;
    --glow-focus: 0 0 0 2px Highlight;
    --text-glow: none;

    /* Scrims */
    --scrim-strong: CanvasText;
    --scrim-soft: CanvasText;
    --scrim-inverted: Canvas;
    --scrim-nav: Canvas;
  }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* 12. Shared mobile-menu primitive (`.site-nav`) — preserved verbatim     */
/*                                                                         */
/* Tier-3 component, Tier-2-only token reads. One primitive consumed by    */
/* every site shell so the 24 themes inherit a working hamburger drawer    */
/* without per-theme JS. Themes paint via three optional override knobs:   */
/*                                                                         */
/*   --nav-menu-bg          drawer background (defaults to --bg-elevated)  */
/*   --nav-menu-fg          drawer text colour (defaults to --fg-default)  */
/*   --nav-toggle-icon-color hamburger bar colour (defaults to --accent)   */
/*                                                                         */
/* Markup contract — every site shell renders exactly this structure:      */
/*                                                                         */
/*   <nav class="site-nav" data-domendor-id="site:nav">                    */
/*     <button class="site-nav__toggle" aria-expanded="false"              */
/*             aria-controls="site-nav-menu" aria-label="Open menu">       */
/*       <span class="site-nav__toggle-icon" aria-hidden="true"></span>    */
/*     </button>                                                           */
/*     <ul id="site-nav-menu" class="site-nav__menu" data-open="false">    */
/*       <li><a href="/">Home</a></li>                                     */
/*       ...                                                               */
/*     </ul>                                                               */
/*   </nav>                                                                */
/*                                                                         */
/* JS behaviour: assets/platform/site-nav.js (auto-mounts on               */
/* DOMContentLoaded, ESC + outside-click + Tab-trap + resize close).       */
/* Breakpoint: 768px (canonical, allowlisted in validate-responsive.ts).   */
/* ─────────────────────────────────────────────────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__menu a {
  color: var(--nav-menu-fg);
  text-decoration: none;
}
.site-nav__menu a:hover {
  color: var(--accent);
}
.site-nav__menu a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Toggle button — 44×44 touch target (WCAG 2.2 AA — Target Size).
   Border uses --border-color so the chrome is tonally calm against any
   theme; the icon colour stays loud via --nav-toggle-icon-color so the
   hamburger reads at a glance. */
.site-nav__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
  background: transparent;
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--nav-toggle-icon-color);
  cursor: pointer;
  font: inherit;
  transition:
    background-color var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) var(--motion-ease),
    color var(--motion-duration) var(--motion-ease);
}
.site-nav__toggle:hover {
  background: var(--bg-muted);
}
.site-nav__toggle:active {
  background: var(--bg-muted);
  border-color: var(--fg-muted);
}
.site-nav__toggle:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Hamburger ⇄ X icon: three bars — the middle bar is the .site-nav__toggle-
   icon span itself; ::before is the top bar; ::after is the bottom bar.
   In the default (closed) state the bars stack as a horizontal trigram.
   On [aria-expanded="true"] the middle bar fades and the outer two rotate
   to form an X. The animation is driven by --motion-duration, which the
   prefers-reduced-motion block above already zeroes, so the swap becomes
   instant for reduced-motion users with no extra CSS gating. */
.site-nav__toggle-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--motion-duration) var(--motion-ease);
}
.site-nav__toggle-icon::before { top: -6px; }
.site-nav__toggle-icon::after  { top:  6px; }

/* Open state — morph to X. translateY closes the 6px gap so the rotated
   bars cross exactly at the centre of the toggle. */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
  background: transparent;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Open/close transition — root --motion-duration is already zeroed by
   the prefers-reduced-motion block above, so no extra gating needed. */
.site-nav__menu {
  transition: transform var(--motion-duration) var(--motion-ease);
}

/* Mobile drawer: 767.98px is the canonical complement to the 768px
   desktop breakpoint (Bootstrap-style off-by-one). Both literals appear
   in scripts/validate-responsive.ts ALLOWED_BREAKPOINT_PX permitted set. */
@media (max-width: 767.98px) {
  .site-nav__toggle {
    display: inline-flex;
  }

  /* While the drawer is open the toggle floats to the top-right corner
     above the drawer (z-index: 1001 > drawer's 1000) so the morphed X-
     close icon is the obvious dismiss target. The closed-state toggle
     stays in flow inside .site-nav. Color flips to --nav-menu-fg so the
     X always reads against the drawer surface (some themes set --accent
     equal to --bg-elevated, which would otherwise hide the icon). */
  .site-nav__toggle[aria-expanded="true"] {
    position: fixed;
    top: var(--space-3);
    inset-inline-end: var(--space-3);
    z-index: 1001;
    background: var(--nav-menu-bg);
    color: var(--nav-menu-fg);
    border-color: var(--nav-menu-fg);
  }

  .site-nav__menu[data-open="false"] {
    display: none;
  }

  .site-nav__menu[data-open="true"] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* top padding leaves room for the floating X-close toggle. */
    padding: calc(var(--space-3) + 44px + var(--space-4)) var(--space-6) var(--space-6);
    background: var(--nav-menu-bg);
    color: var(--nav-menu-fg);
    overflow-y: auto;
  }

  /* Generous touch targets — each link is ≥44px tall via padding +
     line-height. */
  .site-nav__menu[data-open="true"] li {
    list-style: none;
  }
  .site-nav__menu[data-open="true"] a {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--type-lg);
    color: var(--nav-menu-fg);
  }
}

@media (min-width: 768px) {
  .site-nav__toggle {
    display: none;
  }

  .site-nav__menu,
  .site-nav__menu[data-open="false"],
  .site-nav__menu[data-open="true"] {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
  }
}


/* Domendor reset layer — a11y utilities */

/* ── Skip navigation link ─────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
}

.skip-link:focus,
.skip-link:focus-visible {
  inset-inline-start: var(--space-2);
  top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  color: var(--fg-default);
  border: 1px solid var(--surface-border);
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ── Screen-reader / visually-hidden utilities ────────────────────────── */

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden:focus,
.visually-hidden:focus-visible,
.sr-only:focus,
.sr-only:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
}

@layer tokens {
/*
 * design.tokens.css — generated from sites/<domain>/design.md.
 * DO NOT EDIT BY HAND. Edit design.md and re-run `dh regen:tokens`.
 *
 * Generator: src/compiler/regenerate-tokens-css.ts
 * heal-theming Round 1 / Phase 01 architecture A (ticket heal-theming-01-016)
 * generated-from-theme: ai-tool-dark
 */
:root {
  --bg-base: oklch(0.1493 0.0046 264.47);
  --fg-default: oklch(0.9394 0.0046 258.33);
  --accent: oklch(0.6703 0.1739 270.56);
  --accent-2: oklch(0.8651 0.1153 207.08);
  --font-display: system-ui, sans-serif;
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --motion-duration: 250ms;
  --motion-ease: ease-in-out;
}
}

@layer theme {
/*
 * themes/ai-tool-dark/theme.css — Tier-1 high-contrast AI-tool theme
 * Tier: 1 — dark-strategy: auto (default-dark with paired light)
 *
 * Design rationale: Anthropic Claude / OpenAI ChatGPT-class — high-
 * contrast clean type, sharp accent, premium AI-product feel.
 * Recommended site-types: saas (AI/ML products, developer assistants,
 * chat UIs), landing (AI-tool launches), docs (AI/API products), blog
 * (AI research).
 *
 * Glow respects `prefers-reduced-motion` (animation disabled, static
 * halo only) — components that animate `--accent-glow` opacity must
 * scope their transitions accordingly.
 *
 * ────────────────────────────────────────────────────────────────────
 * heal-theming Round 18 — Phase 02 ai-tool-dark canonical-completeness
 *
 * Tier-2 category provenance map (PRD §9.1).  Categories marked
 * INHERIT pick up the _base.css defaults; categories marked OVERRIDE
 * carry dark-first AI-product-register tuning here.
 *
 *   fonts             OVERRIDE  Söhne display+body, IBM Plex Mono mono
 *   surface ladder    OVERRIDE  bg-base 0.13 / bg-elevated 0.18 / bg-muted 0.24
 *   fg ladder         OVERRIDE  fg-default 0.98 / fg-muted 0.70 / fg-inverted 0.13
 *   accent family     OVERRIDE  neon-mint h=165 + magenta h=320 + glow family
 *   type ramp         OVERRIDE  balanced clamp ramp + ui-letter-spacing band
 *   space-scale       INHERIT   1.0 (comfortable density)
 *   lh / measure      OVERRIDE  body 1.55, heading 1.1, prose 70ch
 *   radius ladder     OVERRIDE  soft radius (8/12/20 + pill + card/chip/full/arch)
 *   shape-radius      OVERRIDE  flat 12px
 *   shadow ladder     OVERRIDE  dramatic dark-cast 1–6 + card-rest/hover/modal/popover
 *                               + hard-offset (LIGHT cast per polarity flip) + glow-accent
 *   gradient family   OVERRIDE  accent-linear/radial/conic + chrome-fade + glow-radial
 *                               + surface-elevated + noise none + vignette
 *   scrim family      OVERRIDE  scrim-strong 0.75 alpha (dark base needs more opacity)
 *                               + glass-blur 12px + bg-glass 0.72 alpha
 *   glow family       OVERRIDE  glow-accent / glow-soft / glow-strong / glow-focus
 *                               + text-glow (signature AI-tool register)
 *   motion family     OVERRIDE  confident 220ms anchored + fast/slow/instant
 *                               + ease catalog + long-form durations
 *   border family     OVERRIDE  border-width 1 / style solid / color 0.28
 *                               + border-subtle/default/strong
 *   status family     OVERRIDE  dark-inverted L=0.78 fg / L=0.22 bg (all four)
 *   z-index ladder    INHERIT   base..toast
 *   decoration family OVERRIDE  paper/halftone/stripe/dot/crosshatch -> none
 *                               (AI-tool register is flat, decoration-free —
 *                               README.md §Anti-Patterns line 38-40)
 *   surface/chrome    OVERRIDE  surface-bg + chrome-bg aliases re-bound
 *
 * Cross-reference: heal-theming-plan §1.6 + PRD §9.1.
 * Tier-2 canonical set source: src/themes/tokens/tier2.ts L936 +
 * TIER2_CANONICAL_NAMES enumeration.
 * ────────────────────────────────────────────────────────────────────
 */

[data-theme="ai-tool-dark"] {
  /* Typography — pairing (PRD §9.4 typography_pairing axis) */
  --font-display: 'Söhne', 'Inter', system-ui, sans-serif;
  --font-body:    'Söhne', 'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Typography — balanced ramp (PRD §9.4 type_scale axis = balanced).
     Clamp values centred on _base.css defaults; preview at 1440px aligns. */
  --type-display-1: clamp(3rem, 2rem + 5vw, 6rem);
  --type-display-2: clamp(2.5rem, 1.75rem + 4vw, 4.75rem);
  --type-display-3: clamp(2rem, 1.5rem + 3vw, 3.75rem);
  --type-hero:      clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --type-h1:        clamp(2rem, 1.6rem + 2vw, 3rem);
  --type-h2:        clamp(1.625rem, 1.4rem + 1.2vw, 2.25rem);
  --type-h3:        clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
  --type-lg:        clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --type-body:      clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --type-sm:        0.9375rem;
  --type-xs:        0.8125rem;

  /* Letter-spacing band (Söhne is a tight grotesque — anchor tight at -0.01em) */
  --ui-letter-spacing-tight:       -0.01em;
  --ui-letter-spacing-normal:       0em;
  --ui-letter-spacing-wide:         0.04em;
  --ui-letter-spacing-extra-wide:   0.18em;

  /* Surface ladder — dark first.  Cool neutral hue 270 (slate). */
  --bg-base:     oklch(0.13 0.008 270);
  --bg-elevated: oklch(0.18 0.010 270);
  --bg-muted:    oklch(0.24 0.012 270);

  /* Foreground ladder */
  --fg-default:  oklch(0.98 0.003 270);
  --fg-muted:    oklch(0.70 0.015 270);
  --fg-inverted: oklch(0.13 0.008 270);

  /* Accent family — neon-mint (h=165) primary, magenta (h=320) secondary.
     Brand-identity-preserving: --accent / --accent-2 are NOT pure polarity
     inversions (manual-pin per heal-theming-02-011); they are paired
     across dark/light by adjusting L only, h preserved. */
  --accent:           oklch(0.85 0.20 165);
  --accent-2:         oklch(0.78 0.18 320);
  --accent-3:         oklch(0.72 0.18 165);
  --accent-4:         oklch(0.65 0.15 165);
  --accent-hover:     oklch(0.90 0.20 165);
  --accent-active:    oklch(0.75 0.20 165);
  --accent-disabled:  oklch(0.55 0.05 165);
  --accent-soft:      oklch(0.22 0.04 165);
  --accent-ink:       oklch(0.95 0.10 165);
  --accent-fg:        oklch(0.13 0 0);
  --fg-on-accent:     var(--accent-fg);
  --accent-glow:      oklch(0.85 0.25 165 / 0.5);
  --accent-warm:      oklch(0.80 0.18 75);
  --accent-cool:      oklch(0.78 0.15 220);
  --accent-highlight: oklch(0.88 0.18 165);
  --accent-positive:  oklch(0.78 0.15 145);
  --accent-danger:    oklch(0.72 0.20 25);

  --ring: oklch(0.85 0.20 165);

  /* Rhythm — comfortable density anchor */
  --space-scale:   1;
  --lh-body:       1.55;
  --lh-heading:    1.1;
  --measure-prose: 70ch;

  /* Radius ladder — soft.  shape-radius pins the global radius anchor. */
  --radius-none:    0px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-pill:    9999px;
  --radius-full:    9999px;
  --radius-card:    var(--radius-md);
  --radius-chip:    var(--radius-pill);
  --radius-subtle:  var(--radius-sm);
  --radius-arch:    50% 50% 0 0 / 100% 100% 0 0;
  --shape-radius:   12px;

  /* Shadow ladder — dramatic (PRD §9.4 shadow axis).  Dark-cast 1–6. */
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.40);
  --shadow-2: 0 4px 10px oklch(0 0 0 / 0.45);
  --shadow-3: 0 8px 16px oklch(0 0 0 / 0.50);
  --shadow-4: 0 14px 28px oklch(0 0 0 / 0.55);
  --shadow-5: 0 22px 40px oklch(0 0 0 / 0.60);
  --shadow-6: 0 32px 56px oklch(0 0 0 / 0.65);

  /* Shadow completion — elevation aliases */
  --shadow-card-rest:    var(--shadow-2);
  --shadow-card-hover:   var(--shadow-3);
  --shadow-modal:        var(--shadow-5);
  --shadow-popover:      var(--shadow-4);
  /* hard-offset uses LIGHT cast in dark mode (per _base.css L735) — the
     brutalist-offset reads as a paper-cutout against a deep base. */
  --shadow-hard-offset:  4px 4px 0 oklch(0.97 0 0);
  --shadow-sticker:      2px 3px 0 oklch(0.97 0 0 / 0.18);
  --shadow-glow-accent:  0 0 24px var(--accent-glow);
  --shadow-inset-emboss: inset 0 1px 0 oklch(1 0 0 / 0.04),
                         inset 0 -1px 0 oklch(0.13 0 0 / 0.06);

  /* Motion — confident anchor.  Reduced-motion gate in _base.css §9 zeroes
     every duration; durations live as Tier-2 tokens so component CSS can
     consume them without media-query awareness. */
  --motion-duration:          220ms;
  --motion-duration-fast:     120ms;
  --motion-duration-medium:   220ms;
  --motion-duration-slow:     380ms;
  --motion-duration-instant:   60ms;
  --motion-ease:              cubic-bezier(.2,.7,.2,1);
  --motion-ease-emphasized:   cubic-bezier(.4,1.4,.6,1);
  --motion-ease-decelerate:   cubic-bezier(0,0,.2,1);
  --motion-ease-accelerate:   cubic-bezier(.4,0,1,1);
  --motion-ease-bounce:       cubic-bezier(.34,1.56,.64,1);
  --marquee-duration:         30s;
  --pulse-duration:           1.6s;
  --shimmer-duration:         2.4s;
  --breathe-duration:         4s;
  --orbit-duration:           60s;
  --motion-keyframe-catalog:  "dh-marquee dh-pulse dh-shimmer dh-breathe dh-orbit";

  /* Border family */
  --border-width:   1px;
  --border-style:   solid;
  --border-color:   oklch(0.28 0.012 270);
  --border-subtle:  oklch(0.22 0.008 270);
  --border-default: oklch(0.28 0.012 270);
  --border-strong:  oklch(0.42 0.014 270);

  /* Status family — dark inverted (L≈0.78 fg, L≈0.22 bg, L≈0.32 border).
     Hues per category: success 150 / info 240 / warning 75 / error 25. */
  --status-success-fg:      oklch(0.78 0.10 150);
  --status-success-bg:      oklch(0.22 0.04 150);
  --status-success-border:  oklch(0.32 0.08 150);
  --status-info-fg:         oklch(0.78 0.13 240);
  --status-info-bg:         oklch(0.22 0.04 240);
  --status-info-border:     oklch(0.32 0.08 240);
  --status-warning-fg:      oklch(0.78 0.13 75);
  --status-warning-bg:      oklch(0.22 0.05 75);
  --status-warning-border:  oklch(0.32 0.09 75);
  --status-error-fg:        oklch(0.78 0.16 25);
  --status-error-bg:        oklch(0.22 0.05 25);
  --status-error-border:    oklch(0.32 0.11 25);

  /* Z-index ladder (PRD §9.1).  Inherits from _base.css; restated for
     completeness and to absorb future per-theme overrides. */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  400;
  --z-popover:  500;
  --z-modal:    1000;
  --z-toast:    1100;

  /* Gradient family — tuned to the dark-first surface (mint→magenta). */
  --gradient-accent-linear:    linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-accent-radial:    radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
  --gradient-accent-conic:     conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  --gradient-surface-elevated: linear-gradient(180deg, var(--bg-elevated), var(--bg-base));
  --gradient-glow-accent:      radial-gradient(circle, var(--accent-glow), transparent 60%);
  --gradient-noise-overlay:    none;
  --gradient-vignette-radial:  radial-gradient(ellipse at center, transparent 50%, oklch(0.135 0 0 / 0.40));

  /* Scrim family — dark-mode scrim-strong at 0.75 alpha (base is already
     dark; 0.65 from _base.css isn't enough to mask elevated chrome). */
  --scrim-strong:    oklch(0.13 0 0 / 0.75);
  --scrim-soft:      oklch(0.13 0 0 / 0.45);
  --scrim-inverted:  oklch(0.99 0 0 / 0.55);
  --glass-blur:      blur(12px) saturate(140%);
  --blur-amount:     12px;

  /* Glow family — THE signature of the AI-tool register. */
  --glow-accent:  0 0 16px var(--accent-glow);
  --glow-strong:  0 0 48px var(--accent-glow), 0 0 8px var(--accent);
  --text-glow:    0 0 12px var(--accent-glow);
  /* --glow-soft and --glow-focus are declared by _base.css §7
     @supports(color: oklch(from black l c h)) using relative-color
     syntax against --accent / --ring so per-theme overrides flow
     through automatically.  No need to redeclare here. */

  /* Decoration family — AI-tool register is flat and decoration-free
     per README.md §Anti-Patterns L38-40 (no warm parchment, no compact
     tabular, no decorative serifs).  Opt-out paper/halftone/stripe/
     dot/crosshatch to `none`; keep noise/grid/scanline as no-ops too
     to enforce the visual register. */
  --decoration-paper-bg:       none;
  --decoration-halftone-bg:    none;
  --decoration-stripe-bg:      none;
  --decoration-dot-bg:         none;
  --decoration-crosshatch-bg:  none;
  --decoration-noise-bg:       none;
  --decoration-grid-bg:        none;
  --decoration-scanline-bg:    none;

  /* Surface / chrome convenience aliases */
  --surface-bg:     var(--bg-elevated);
  --surface-border: var(--border-color);
  --chrome-bg:      var(--bg-base);
  --chrome-border:  var(--border-color);
}

/* ───────────────────────────────────────────────────────────────────── */
/* Round 9 T3 — paired polarity blocks.                                  */
/* Lab-receiver MutationObserver depends on these.                        */
/* ───────────────────────────────────────────────────────────────────── */

/* Explicit dark block mirrors the default block for explicit selection. */
[data-color-scheme="dark"] [data-theme="ai-tool-dark"],
[data-theme="ai-tool-dark"][data-color-scheme="dark"] {
  --bg-base:     oklch(0.13 0.008 270);
  --bg-elevated: oklch(0.18 0.010 270);
  --bg-muted:    oklch(0.24 0.012 270);
  --fg-default:  oklch(0.98 0.003 270);
  --fg-muted:    oklch(0.70 0.015 270);
  --fg-inverted: oklch(0.13 0.008 270);

  --accent:           oklch(0.85 0.20 165);
  --accent-2:         oklch(0.78 0.18 320);
  --accent-3:         oklch(0.72 0.18 165);
  --accent-4:         oklch(0.65 0.15 165);
  --accent-hover:     oklch(0.90 0.20 165);
  --accent-active:    oklch(0.75 0.20 165);
  --accent-disabled:  oklch(0.55 0.05 165);
  --accent-soft:      oklch(0.22 0.04 165);
  --accent-ink:       oklch(0.95 0.10 165);
  --accent-fg:        oklch(0.13 0 0);
  --fg-on-accent:     var(--accent-fg);
  --accent-glow:      oklch(0.85 0.25 165 / 0.5);
  --accent-warm:      oklch(0.80 0.18 75);
  --accent-cool:      oklch(0.78 0.15 220);
  --accent-highlight: oklch(0.88 0.18 165);
  --accent-positive:  oklch(0.78 0.15 145);
  --accent-danger:    oklch(0.72 0.20 25);

  --ring:           oklch(0.85 0.20 165);
  --border-color:   oklch(0.28 0.012 270);
  --border-subtle:  oklch(0.22 0.008 270);
  --border-default: oklch(0.28 0.012 270);
  --border-strong:  oklch(0.42 0.014 270);

  --status-success-fg:     oklch(0.78 0.10 150);
  --status-success-bg:     oklch(0.22 0.04 150);
  --status-success-border: oklch(0.32 0.08 150);
  --status-info-fg:        oklch(0.78 0.13 240);
  --status-info-bg:        oklch(0.22 0.04 240);
  --status-info-border:    oklch(0.32 0.08 240);
  --status-warning-fg:     oklch(0.78 0.13 75);
  --status-warning-bg:     oklch(0.22 0.05 75);
  --status-warning-border: oklch(0.32 0.09 75);
  --status-error-fg:       oklch(0.78 0.16 25);
  --status-error-bg:       oklch(0.22 0.05 25);
  --status-error-border:   oklch(0.32 0.11 25);

  /* Shadow polarity-flippers: dark mode uses LIGHT cast offsets per
     _base.css L747-748. */
  --shadow-hard-offset:  4px 4px 0 oklch(0.97 0 0);
  --shadow-sticker:      2px 3px 0 oklch(0.97 0 0 / 0.18);

  --scrim-strong:    oklch(0.13 0 0 / 0.75);
  --scrim-soft:      oklch(0.13 0 0 / 0.45);
  --scrim-inverted:  oklch(0.99 0 0 / 0.55);
}

/* Paired light — accent-glow alpha boosted to 0.35 to retain halo.
   Dual selector (ancestor-descendant + compound) covers both the
   parent-element data-color-scheme pattern (<html>/<body>) and the
   compound-on-self pattern (theme node carries its own polarity flag).
   heal-theming-02-010. */
[data-color-scheme="light"] [data-theme="ai-tool-dark"],
[data-theme="ai-tool-dark"][data-color-scheme="light"] {
  --bg-base:     oklch(0.985 0.004 270);
  --bg-elevated: oklch(0.96  0.005 270);
  --bg-muted:    oklch(0.92  0.007 270);
  --fg-default:  oklch(0.135 0.008 270);
  --fg-muted:    oklch(0.42  0.014 270);
  --fg-inverted: oklch(0.985 0.004 270);

  --accent:           oklch(0.50 0.18 165);
  --accent-2:         oklch(0.50 0.18 320);
  --accent-3:         oklch(0.55 0.16 165);
  --accent-4:         oklch(0.45 0.14 165);
  --accent-hover:     oklch(0.42 0.18 165);
  --accent-active:    oklch(0.38 0.18 165);
  --accent-disabled:  oklch(0.70 0.04 165);
  --accent-soft:      oklch(0.92 0.04 165);
  --accent-ink:       oklch(0.25 0.10 165);
  /* heal-theming Round 22 ticket 06-011: correct --accent-fg to near-white.
     Near-black oklch(0.10 0 0) on accent oklch(0.50 0.18 165) yields 4.103:1
     (FAILS WCAG 2.1 AA 4.5:1). Near-white oklch(0.985 0 0) yields 4.806:1 (PASS).
     Previous heal-theming-02-012 comment had an incorrect estimate ("≈7.4:1"
     for near-black) — the actual computed value is 4.103:1, not 7.4:1. */
  --accent-fg:        oklch(0.985 0 0);
  --fg-on-accent:     var(--accent-fg);
  --accent-glow:      oklch(0.55 0.22 165 / 0.35);
  --accent-warm:      oklch(0.55 0.16 75);
  --accent-cool:      oklch(0.50 0.13 220);
  --accent-highlight: oklch(0.55 0.20 165);
  --accent-positive:  oklch(0.45 0.14 145);
  --accent-danger:    oklch(0.50 0.20 25);

  --ring:           oklch(0.50 0.18 165);
  --border-color:   oklch(0.90 0.006 270);
  --border-subtle:  oklch(0.93 0.005 270);
  --border-default: oklch(0.88 0.007 270);
  --border-strong:  oklch(0.75 0.010 270);

  /* Status — light-mode polarity (fg dark, bg pale) */
  --status-success-fg:     oklch(0.32 0.08 150);
  --status-success-bg:     oklch(0.95 0.03 150);
  --status-success-border: oklch(0.78 0.10 150);
  --status-info-fg:        oklch(0.32 0.10 240);
  --status-info-bg:        oklch(0.95 0.03 240);
  --status-info-border:    oklch(0.78 0.13 240);
  --status-warning-fg:     oklch(0.32 0.10 75);
  --status-warning-bg:     oklch(0.95 0.04 75);
  --status-warning-border: oklch(0.78 0.13 75);
  --status-error-fg:       oklch(0.32 0.12 25);
  --status-error-bg:       oklch(0.95 0.04 25);
  --status-error-border:   oklch(0.78 0.16 25);

  /* Shadow polarity-flippers: light mode uses DARK cast offsets. */
  --shadow-hard-offset:  4px 4px 0 oklch(0.135 0 0);
  --shadow-sticker:      2px 3px 0 oklch(0.135 0 0 / 0.18);

  --scrim-strong:    oklch(0.985 0 0 / 0.75);
  --scrim-soft:      oklch(0.985 0 0 / 0.45);
  --scrim-inverted:  oklch(0.13 0 0 / 0.55);

  /* Gradient vignette — flip to a light-cast vignette for paper-stock feel */
  --gradient-vignette-radial: radial-gradient(ellipse at center, transparent 50%, oklch(0.985 0 0 / 0.40));
}
}

@layer theme-site {
/*
 * themes/site/underscorebrain-signal-cyan/tokens.css
 *
 * Tier-2 canonical overrides extracted from
 * _import/import-04/new-sites/sites/underscore-brain/index.html (lines 11-17).
 *
 * Authored by import-new-sites-1 Phase C1 via the `author-site-theme` skill.
 * Frozen after first emission per source-fidelity-playbook.md §IV Phase 2.
 *
 * The compiler wraps this entire file in `@layer theme-site { ... }` automatically.
 * Slot 5 of 8 (post-elevate-site-types) — between `theme-site-type` and `archetype`.
 *
 * Color strategy: source-mirror fidelity uses the source's literal hex / rgba
 * values directly in the source-polarity (dark) blocks so the Theme-Lab
 * color-overlay matcher (R02-05) keys cleanly off the source CSS literals
 * (hex match path; no OKLCH-approximation drift). The opposite-polarity (light)
 * block is the computed invert-L mirror.
 *
 * Aliased bespoke names (--bg → --bg-base, --sig → --accent, --ok →
 * --status-success-fg, ...) live in sites/underscorebrain.com/DESIGN.md §5;
 * the css-token-rewriter is dormant on source-mirror pages
 * (`theme_overlay: lab-preview-only`) so the bespoke literals reach the browser
 * unmodified. The Theme-Lab alias overlay maps them at lab activation time.
 *
 * Tier-2-only consumption per PRD §9.1: no Tier-1 --p-* declarations here.
 */


/* Block 1 — source-polarity values (specificity 0,0,1). Production-render
   path when <html> has no data-color-scheme attribute. Source polarity: dark. */
:where(:root) {
  --bg-base: #0a0b0d;  /* --bg — page substrate */
  --bg-page: #0a0b0d;
  --bg-surface: #0d0f13;  /* --bg2 — window/codecard recessed ground */
  --bg-elevated: #111419;  /* --panel — nav, cards, app tiles, stages */
  --bg-muted: #161a21;  /* --panel2 — card hover ground */
  --bg-deep: #1b202a;  /* --panel3 — active tab, palette item, glyph */
  --fg-default: #e9ebee;  /* --ink — headings + body copy */
  --fg-muted: #969ca8;  /* --mut — lede, descriptions, secondary copy */
  --fg-subtle: #5a616d;  /* --dim — meta, kickers, status text */
  --fg-on-accent: #06080f;  /* deep-ink fg on signal-blue / cyan fills */
  --accent: #6e8bff;  /* --sig — primary signal blue: cursor, links, CTAs */
  --accent-hover: #5a6ef5;  /* primary-button gradient end */
  --accent-active: #5a6ef5;
  --accent-2: #67e8f9;  /* --sig2 — secondary cyan: command palette, avatar */
  --accent-3: #67e8f9;
  --accent-cool: #67e8f9;
  --status-success-fg: #7ee3a7;  /* --ok — approve verb, pulse, trust dots */
  --status-warning-fg: #f4c46b;  /* --warn — review-mode interrupt chrome */
  --status-error-fg: #ff7a85;  /* --bad — reject verb */
  --border-subtle: rgba(255,255,255,.075);  /* --line — section + nav hairlines */
  --border-default: rgba(255,255,255,.14);  /* --line2 — card / kbd / button borders */
  --border-strong: #969ca8;
  --line: rgba(255,255,255,.075);
  --line-2: rgba(255,255,255,.14);
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-heading: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-condensed: "Schibsted Grotesk", system-ui, sans-serif;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-decelerate: cubic-bezier(.22, 1, .36, 1);
  --motion-duration-fast: 0.25s;
  --motion-duration: 0.30s;
  --motion-duration-medium: 0.30s;
  --motion-duration-slow: 0.40s;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-card: 13px;
  --radius-pill: 9999px;
  --lh-body: 1.55;
}

/* Block 2 — re-asserts source-polarity (dark) values when Theme Lab pins the source. */
[data-color-scheme="dark"] :root {
  --bg-base: #0a0b0d;  /* --bg — page substrate */
  --bg-page: #0a0b0d;
  --bg-surface: #0d0f13;  /* --bg2 — window/codecard recessed ground */
  --bg-elevated: #111419;  /* --panel — nav, cards, app tiles, stages */
  --bg-muted: #161a21;  /* --panel2 — card hover ground */
  --bg-deep: #1b202a;  /* --panel3 — active tab, palette item, glyph */
  --fg-default: #e9ebee;  /* --ink — headings + body copy */
  --fg-muted: #969ca8;  /* --mut — lede, descriptions, secondary copy */
  --fg-subtle: #5a616d;  /* --dim — meta, kickers, status text */
  --fg-on-accent: #06080f;  /* deep-ink fg on signal-blue / cyan fills */
  --accent: #6e8bff;  /* --sig — primary signal blue: cursor, links, CTAs */
  --accent-hover: #5a6ef5;  /* primary-button gradient end */
  --accent-active: #5a6ef5;
  --accent-2: #67e8f9;  /* --sig2 — secondary cyan: command palette, avatar */
  --accent-3: #67e8f9;
  --accent-cool: #67e8f9;
  --status-success-fg: #7ee3a7;  /* --ok — approve verb, pulse, trust dots */
  --status-warning-fg: #f4c46b;  /* --warn — review-mode interrupt chrome */
  --status-error-fg: #ff7a85;  /* --bad — reject verb */
  --border-subtle: rgba(255,255,255,.075);  /* --line — section + nav hairlines */
  --border-default: rgba(255,255,255,.14);  /* --line2 — card / kbd / button borders */
  --border-strong: #969ca8;
  --line: rgba(255,255,255,.075);
  --line-2: rgba(255,255,255,.14);
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-heading: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-condensed: "Schibsted Grotesk", system-ui, sans-serif;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-decelerate: cubic-bezier(.22, 1, .36, 1);
  --motion-duration-fast: 0.25s;
  --motion-duration: 0.30s;
  --motion-duration-medium: 0.30s;
  --motion-duration-slow: 0.40s;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-card: 13px;
  --radius-pill: 9999px;
  --lh-body: 1.55;
}

/* Block 3 — opposite-polarity (light) values, computed via the invert-L
   mirror per tier2.ts polarity field: L_light = clamp(1 - L_dark, 0.135,
   0.975), chroma restored from the dark C×0.85 contraction. Per-theme
   accent + status tokens keep their source hue (polarity 'per-theme' /
   'invert-L' fg) and are re-asserted at source chroma. */
[data-color-scheme="light"] :root {
  --bg-base: oklch(0.8507 0.0054 264.47);
  --bg-page: oklch(0.8507 0.0054 264.47);
  --bg-surface: oklch(0.8319 0.0106 264.30);
  --bg-elevated: oklch(0.8097 0.0132 260.65);
  --bg-muted: oklch(0.7832 0.0178 261.62);
  --bg-deep: oklch(0.7569 0.0242 264.08);
  --fg-default: oklch(0.1350 0.0054 258.33);
  --fg-muted: oklch(0.3083 0.0222 264.44);
  --fg-subtle: oklch(0.5092 0.0248 261.29);
  --border-strong: oklch(0.3083 0.0222 264.44);
}


/*
 * themes/site/underscorebrain-signal-cyan/components.css
 *
 * Tier-3 component overrides for the Underscore Brain source-mirror page.
 * Authored by `author-site-theme` (import-new-sites-1 Phase C1).
 * Selectors read Tier-2 canonicals only; no Tier-1 reach-through.
 *
 * The source page declares all of its component CSS inline inside
 * sites/underscorebrain.com/pages/index.html under the source-preserved
 * literal <style> block. This file declares no overrides yet —
 * components.css is the iteration surface (source-fidelity-playbook.md
 * §IV Phase 5) and stays minimal until a verification triad cycle
 * surfaces a token-resolved drift that needs cross-page bespoke styling.
 */

@layer theme-site {
  /* Reserved for source-mirror iteration deltas — empty on initial emission. */
}
}