/* ============================================================
   DH SYSTEM v2 — COMPONENTS (Layer 3)
   ============================================================
   Defines DH semantic components using ONLY Layer 1 + 2 tokens.
   No @apply. No Tailwind utility class names baked into CSS.
   No hardcoded colors. Everything via var(--token, fallback).

   Component classes follow these conventions:
   - .dh-*  → new v2 components
   - .btn   → buttons (BEM modifiers like .btn--primary)
   - .pill  → pills + badges
   - Components react to [data-surface="X"] cascade
   - Components react to [data-scheme="dark"] cascade

   This file is independent of Tailwind. If Tailwind v5 ships
   tomorrow, NOTHING in this file needs to change.
   ============================================================ */

/* ============================================================
   BASE — every page inherits these via cascade
   ============================================================ */

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--surface-text);
  background: var(--surface-bg);
}

body {
  background: var(--surface-bg);
  color: var(--surface-text);
  margin: 0;
  font-feature-settings: "ss01", "cv01";
}

/* Smooth surface transitions when brand pack swaps */
body, [data-surface] {
  transition:
    background-color var(--motion-medium) var(--ease-out),
    color var(--motion-medium) var(--ease-out);
}

/* ============================================================
   SHELL — page-level layout container
   ============================================================ */

.dh-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* ============================================================
   CANONICAL SHELLS — Site Structure (Layer 1)
   ============================================================
   4-tier shell system per Site Structure spec. Templates use these
   classes directly instead of defining bespoke .X-shell variants.
   Width tokens come from tokens-v2.css. Padding adapts per breakpoint.

   .shell-outer  → 1280px → nav, footer, full-bleed hero
   .shell-content → 1200px → section bodies, multi-col grids
   .shell-card    →  880px → single-card moments, offer blocks
   .shell-reading →  720px → article prose column
   .shell-flush   →  no inline padding modifier
   ============================================================ */
.shell-outer {
  width: 100%;
  max-width: var(--shell-outer-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell-content {
  width: 100%;
  max-width: var(--shell-content-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell-card {
  width: 100%;
  max-width: var(--shell-card-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell-reading {
  width: 100%;
  max-width: var(--shell-reading-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell-flush {
  padding-inline: 0;
}

/* ============================================================
   ACCESSIBILITY UTILITIES — Site Structure Layer 1 / G7
   ============================================================
   Skip-to-content link, screen-reader-only utility, keyboard focus
   ring helper. Required for WCAG AA. Universal across all templates.
   ============================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  z-index: var(--z-tooltip);
  transition: top var(--motion-base) var(--ease-out);
}
.skip-link:focus {
  top: 8px;
  left: 8px;
}
.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;
}
.focus-visible-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   SCROLL PROGRESS — Site Structure Layer 1 / G8
   ============================================================
   Top-of-page reading progress bar. Width grows as user scrolls.
   JS writes --scroll-progress (0 → 1) via window scroll listener.
   Single canonical implementation, no per-template duplicates.
   ============================================================ */
.scroll-progress {
  --scroll-progress: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary-fill);
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress));
  z-index: var(--z-sticky);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

/* ============================================================
   ICON SYSTEM — Site Structure Layer 1 / G6
   ============================================================
   Inline SVG line-icons (Lucide-style). Base sizing in em so icons
   inherit parent text size by default. Explicit size modifiers
   override. currentColor inherits from text color.
   ============================================================ */
.icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.15em;
}
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }

/* ============================================================
   FORM SYSTEM — Site Structure Layer 1 / G5
   ============================================================
   Canonical .form family. Universal across email opt-ins, contact
   forms, search forms, brand-builder inputs. Replaces the per-template
   .X-form patterns. Existing .dh-input / .dh-select / .dh-checkbox
   classes still work as legacy aliases via the override map below.
   ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.form__label {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  color: var(--surface-text);
}
.form__input,
.form__textarea,
.form__select {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--surface-text);
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-primary-fill);
  box-shadow: var(--focus-ring);
}
.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--surface-text);
  opacity: 0.45;
}
.form__textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
.form__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}
.form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--surface-text);
}
.form__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.form__helper {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  color: var(--surface-text);
  opacity: 0.65;
}
.form__error {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  color: var(--color-error);
  margin-top: var(--space-2xs);
}
.form__submit {
  align-self: flex-start;
}
.form--inline {
  flex-direction: row;
  gap: var(--space-xs);
  align-items: stretch;
  flex-wrap: wrap;
}
.form--inline .form__input { flex: 1; min-width: 200px; }

/* ============================================================
   SURFACE BAND — section-level surface container
   ============================================================ */

.dh-surface {
  background: var(--surface-bg);
  color: var(--surface-text);
  padding-block: var(--space-3xl);
  position: relative;
}

.dh-surface__shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* ============================================================
   TYPOGRAPHY ROLES
   ============================================================ */

.dh-eyebrow {
  display: inline-block;
  /* Body font for eyebrows. Tracked + uppercase serifs look distorted at
     small sizes. Sans-serif (Inter, etc.) is designed for legibility at
     micro scale. System-wide rule: anything small + uppercase + tracked
     uses --font-body. Display font reserved for headings + display sizes. */
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-primary-text);
  margin: 0;
}

.dh-display-xl {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--surface-text);
  margin: 0;
}

.dh-display-lg {
  font-family: var(--font-display);
  font-size: var(--t-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--surface-text);
  margin: 0;
}

.dh-display-md {
  font-family: var(--font-display);
  font-size: var(--t-display-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--surface-text);
  margin: 0;
}

.dh-display-sm {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--surface-text);
  margin: 0;
}

.dh-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--surface-text);
  margin: 0;
}

/* Lead copy is PROMINENT supporting text, not subordinate.
   Use full surface-text strength. Carbon + Material 3 + shadcn
   all do this. Muting body-tier copy on saturated brand surfaces
   produces pastel-on-saturated, which is unreadable. */
.dh-lead {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--surface-text);
  margin: 0;
}

.dh-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--surface-text);
  margin: 0;
}

/* Slight mute. Use for paragraphs that ARE subordinate to nearby
   prominent text (e.g. card descriptions under a card title). */
.dh-body--secondary {
  color: var(--surface-text-secondary);
}

.dh-small {
  font-size: var(--t-small);
  color: var(--surface-text-secondary);
}

.dh-caption {
  font-size: var(--t-caption);
  letter-spacing: var(--tr-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--surface-muted);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Buttons use BODY font (Inter, etc.) not display (Fraunces, etc.).
     Display fonts often have editorial personality that's right for
     headings but wrong for UI control labels which need to read clean
     and tight. System-wide change across editor + blog + templates. */
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--btn-weight);
  line-height: 1;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  /* Color transitions use NON-OVERSHOOT easing always. Energetic + playful
     motion presets have spring overshoot that's gorgeous on transforms but
     creates a visible "shutter" flicker when applied to bg/border color.
     Color is always linear-ease, transforms get the brand's overshoot. */
  transition:
    background-color 140ms ease-out,
    border-color 140ms ease-out,
    color 140ms ease-out,
    box-shadow 140ms ease-out;
  user-select: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* r459d — Primary + secondary buttons route through Action Component
   Safety Tokens. Brand color is INPUT, action token is OUTPUT.
   Fixes CTA-SAFETY-01 (warm/pale brand primaries blending into nearby
   gradients/surfaces). Contract lives in tokens-v2.css. */
.btn--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  border-color: var(--action-primary-border);
  box-shadow: var(--action-primary-shadow);
}

.btn--primary:hover {
  background: var(--action-primary-hover-bg);
  border-color: var(--action-primary-border);
}

.btn--primary:active {
  /* Press feedback intentionally tracks the brand --color-primary-active
     so the press still feels brand-anchored. Falls back to action hover
     bg if the brand var resolves empty. */
  background: var(--color-primary-active, var(--action-primary-hover-bg));
  border-color: var(--color-primary-active, var(--action-primary-hover-bg));
}

.btn--secondary {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-text);
  border-color: var(--action-secondary-border);
}

.btn--secondary:hover {
  background: var(--action-secondary-hover-bg);
  border-color: var(--action-secondary-border);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary-text);
  border-color: var(--color-primary-fill);
}

.btn--outline:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary-text);
}

[data-surface="ink"] .btn--outline,
[data-surface="deep"] .btn--outline,
[data-surface="primary"] .btn--outline {
  /* Why: outline btn on deep/primary surface needs guaranteed pure-white
     text + translucent white border for any brand. Brand --color-X-text
     would drift toward the bg on dark-primary brands like Midnight Press
     and lose contrast. Pure white is the only safe value here. */
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

[data-surface="ink"] .btn--outline:hover,
[data-surface="deep"] .btn--outline:hover,
[data-surface="primary"] .btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--surface-text);
  border-color: transparent;
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--surface-text) 8%, transparent);
}

.btn--sm {
  padding: 8px 14px;
  font-size: var(--t-small);
}

.btn--lg {
  padding: 16px 28px;
  font-size: var(--t-lead);
}

/* ============================================================
   BRAND MARK
   Solid primary-color circle with a single-letter logoMark
   centered inside. Default fallback when a brand has no logo
   image asset. Uses --color-primary-fill (auto-lifts on dark
   surfaces) and --text-on-primary (contrast-correct foreground)
   so it stays legible across every brand pack + scheme combo.
   Pair with the optional <img class="brand-logo"> sibling for
   real logo support — the renderer hides whichever element is
   inappropriate based on whether the brand provides a logoUrl.
   ============================================================ */

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-display-max);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  flex-shrink: 0;
  user-select: none;
}

.brand-mark--sm { width: 24px; height: 24px; font-size: 12px; }
.brand-mark--lg { width: 40px; height: 40px; font-size: 20px; }
.brand-mark--xl { width: 56px; height: 56px; font-size: 28px; }

/* Logo image companion. Lives next to .brand-mark in the DOM
   so both render and the renderer hides the wrong one based on
   whether brand.logoUrl resolved. Same size scale as .brand-mark
   so swap is visually neutral. */
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.brand-logo--sm { width: 24px; height: 24px; }
.brand-logo--lg { width: 40px; height: 40px; }
.brand-logo--xl { width: 56px; height: 56px; }

/* Smart swap — pure CSS, no JS branching. If the .brand-logo has no
   src attribute (renderer strips it when logoUrl is empty), hide the
   logo and the adjacent .brand-mark sibling stays visible. If the logo
   DOES have a src, hide the .brand-mark instead so only the image
   shows. Markup pattern: <img class="brand-logo"/><span class="brand-mark">A</span> */
.brand-logo:not([src]),
.brand-logo[src=""] { display: none; }

.brand-logo[src]:not([src=""]) + .brand-mark { display: none; }

/* ============================================================
   PILLS + BADGES
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Pills use body font (same reason as .dh-eyebrow). */
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  padding: var(--pill-padding-y) var(--pill-padding-x);
  border-radius: var(--pill-radius);
  letter-spacing: 0.02em;
  background: var(--color-primary-tint);
  color: var(--color-primary-text);
  border: var(--border-thin) var(--border-style) color-mix(in srgb, var(--color-primary-fill)20%, transparent);
}

.pill--soft {
  background: color-mix(in srgb, var(--surface-text) 8%, transparent);
  color: var(--surface-text);
  border-color: color-mix(in srgb, var(--surface-text) 16%, transparent);
}

.pill--solid {
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
  border-color: var(--color-primary-fill);
}

.pill--outline {
  background: transparent;
  color: var(--color-primary-text);
  border-color: var(--color-primary-fill);
}

.pill--success {
  background: color-mix(in srgb, var(--signal-success) 18%, transparent);
  color: color-mix(in oklch, var(--signal-success), black 30%);
  border-color: color-mix(in srgb, var(--signal-success) 30%, transparent);
}

[data-surface="ink"] .pill--success,
[data-surface="deep"] .pill--success {
  color: color-mix(in oklch, var(--signal-success), white 25%);
}

.pill--warning {
  background: color-mix(in srgb, var(--signal-warning) 18%, transparent);
  color: color-mix(in oklch, var(--signal-warning), black 35%);
  border-color: color-mix(in srgb, var(--signal-warning) 30%, transparent);
}

.pill--error {
  background: color-mix(in srgb, var(--signal-error) 18%, transparent);
  color: color-mix(in oklch, var(--signal-error), black 25%);
  border-color: color-mix(in srgb, var(--signal-error) 30%, transparent);
}

/* ============================================================
   CARDS
   ============================================================ */

.dh-card {
  background: var(--surface-card-bg);
  color: var(--surface-text);
  border: var(--border-thin) solid var(--surface-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: var(--transition-base);
  /* Container query host: descendants can adapt to THIS card's width,
     not the viewport. Drop into a 280px column or 700px hero, the
     internals self-tune. */
  container-type: inline-size;
  container-name: dh-card;
}

/* Card layout adapts to its OWN container width, not viewport. */
@container dh-card (min-width: 360px) {
  .dh-card { padding: calc(var(--card-padding) * 1.15); gap: var(--space-lg); }
  .dh-card__title { font-size: var(--t-display-sm); }
}
@container dh-card (max-width: 240px) {
  .dh-card { padding: calc(var(--card-padding) * 0.75); gap: var(--space-sm); }
  .dh-card__title { font-size: var(--t-body); }
  .dh-card__body { font-size: var(--t-small); }
}

.dh-card--lifted {
  box-shadow: var(--shadow-md);
}

.dh-card--lifted:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.dh-card__eyebrow {
  font-size: var(--t-caption);
  letter-spacing: var(--tr-eyebrow);
  text-transform: var(--case-eyebrow);
  font-weight: var(--fw-semi);
  color: var(--color-primary-text);
  margin: 0;
}

.dh-card__title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--surface-text);
  margin: 0;
}

/* Card body uses the SECONDARY tier (slight mute). Cards already
   have a contrasting card background that helps separate the body
   text from the surface; -secondary creates subtle subordination
   without sacrificing legibility on brand-color surfaces. */
.dh-card__body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--surface-text-secondary);
  margin: 0;
}

.dh-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ============================================================
   CALLOUTS
   ============================================================ */

/* BG mixes brand with the local --surface-bg, so the callout
   ALWAYS contrasts with the page text color. Was using a
   hardcoded color-mix to white via --color-primary-tint, which
   made dark-scheme callouts unreadable (light text on light bg). */
.dh-callout {
  background: color-mix(in srgb, var(--color-primary-fill)14%, var(--surface-bg));
  color: var(--surface-text);
  border-left: var(--border-thick) var(--border-style) var(--color-primary-fill);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-block: var(--space-md);
}

.dh-callout--accent {
  background: var(--color-accent-tint);
  border-left-color: var(--color-accent-fill);
}

.dh-callout__title {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: var(--fw-semi);
  color: var(--color-primary-text);
  margin: 0 0 4px;
}

.dh-callout__body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--surface-text);
  margin: 0;
}

/* On dark surfaces, replace the brand-tint background with a
   surface-text-derived wash so it auto-adapts to any scheme. */
[data-surface="ink"] .dh-callout,
[data-surface="deep"] .dh-callout,
[data-surface="primary"] .dh-callout,
[data-surface="secondary"] .dh-callout {
  background: color-mix(in srgb, var(--surface-text) 8%, transparent);
  border-left-color: var(--color-primary-text);
}

[data-surface="ink"] .dh-callout__title,
[data-surface="deep"] .dh-callout__title,
[data-surface="primary"] .dh-callout__title,
[data-surface="secondary"] .dh-callout__title {
  color: var(--color-primary-text);
}

/* ============================================================
   INPUTS
   ============================================================ */

.dh-input {
  font-family: var(--font-body);
  font-size: var(--t-body);
  background: var(--surface-card-bg);
  color: var(--surface-text);
  border: var(--border-thin) solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  transition: var(--transition-base);
}

.dh-input:focus {
  outline: none;
  border-color: var(--color-primary-fill);
  box-shadow: var(--focus-ring);
}

.dh-input::placeholder {
  color: var(--surface-muted);
}

/* ============================================================
   DIVIDERS
   ============================================================ */

.dh-divider {
  height: 1px;
  background: var(--surface-border);
  border: 0;
  margin-block: var(--space-xl);
}

/* ============================================================
   STAT BLOCKS
   ============================================================ */

.dh-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dh-stat__value {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-text);
  line-height: var(--lh-tight);
}

.dh-stat__label {
  font-size: var(--t-caption);
  letter-spacing: var(--tr-eyebrow);
  text-transform: var(--case-label);
  color: var(--surface-muted);
}

/* ============================================================
   LOGO MARK
   ============================================================ */

.dh-logo {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--surface-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dh-logo__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-fill);
  display: inline-block;
}

/* ============================================================
   COMPONENT LIBRARY v2.1.0
   45+ shadcn-equivalent components. All read DH tokens.
   All auto-adapt via data-surface cascade.
   ============================================================ */

/* ---------- AVATARS ---------- */
.dh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary-text);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  overflow: hidden;
  flex-shrink: 0;
}
.dh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dh-avatar--sm { width: 28px; height: 28px; font-size: var(--t-caption); }
.dh-avatar--lg { width: 56px; height: 56px; font-size: var(--t-body); }
.dh-avatar-group { display: inline-flex; }
.dh-avatar-group .dh-avatar {
  border: var(--border-med) var(--border-style) var(--surface-bg);
  margin-left: -10px;
}
.dh-avatar-group .dh-avatar:first-child { margin-left: 0; }

/* ---------- BADGE ---------- */
.dh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.dh-badge--soft { background: var(--color-primary-tint); color: var(--color-primary-text); }
.dh-badge--outline {
  background: transparent;
  color: var(--surface-text);
  border: var(--border-thin) var(--border-style) var(--surface-border);
}
.dh-badge--success {
  background: color-mix(in srgb, var(--signal-success) 18%, transparent);
  color: color-mix(in oklch, var(--signal-success), black 30%);
}
[data-surface="ink"] .dh-badge--success,
[data-surface="deep"] .dh-badge--success {
  color: color-mix(in oklch, var(--signal-success), white 25%);
}

/* ---------- KBD ---------- */
.dh-kbd {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-card-bg);
  color: var(--surface-text-secondary);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  box-shadow: 0 1px 0 var(--surface-border);
  min-width: 20px;
  justify-content: center;
}

/* ---------- CHECKBOX ---------- */
.dh-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--t-body);
  color: var(--surface-text);
}
.dh-checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  border: var(--border-med) var(--border-style) var(--surface-border);
  background: var(--surface-card-bg);
  cursor: pointer;
  position: relative;
  transition: var(--transition-base);
  margin: 0;
  flex-shrink: 0;
}
.dh-checkbox input[type="checkbox"]:checked {
  background: var(--color-primary-fill);
  border-color: var(--color-primary-fill);
}
.dh-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- RADIO ---------- */
.dh-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--t-body);
  color: var(--surface-text);
}
.dh-radio input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: var(--border-med) var(--border-style) var(--surface-border);
  background: var(--surface-card-bg);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  transition: var(--transition-base);
}
.dh-radio input[type="radio"]:checked {
  border-color: var(--color-primary-fill);
  border-width: 5px;
}

/* ---------- SWITCH ---------- */
.dh-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--t-body);
  color: var(--surface-text);
}
.dh-switch input[type="checkbox"] {
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--surface-border);
  position: relative;
  cursor: pointer;
  transition: var(--transition-base);
  margin: 0;
  flex-shrink: 0;
}
.dh-switch input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: var(--transition-base);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.dh-switch input[type="checkbox"]:checked { background: var(--color-primary-fill); }
.dh-switch input[type="checkbox"]:checked::before { transform: translateX(16px); }

/* ---------- SLIDER ---------- */
.dh-slider {
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-border);
  outline: none;
}
.dh-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-fill);
  cursor: pointer;
  border: var(--border-med) var(--border-style) var(--surface-bg);
  box-shadow: var(--shadow-sm);
}
.dh-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-fill);
  cursor: pointer;
  border: var(--border-med) var(--border-style) var(--surface-bg);
  box-shadow: var(--shadow-sm);
}

/* ---------- TEXTAREA ---------- */
.dh-textarea {
  font-family: var(--font-body);
  font-size: var(--t-body);
  background: var(--surface-card-bg);
  color: var(--surface-text);
  border: var(--border-thin) solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  min-height: 96px;
  resize: vertical;
  transition: var(--transition-base);
}
.dh-textarea:focus {
  outline: none;
  border-color: var(--color-primary-fill);
  box-shadow: var(--focus-ring);
}
.dh-textarea::placeholder { color: var(--surface-muted); }

/* ---------- SELECT ---------- */
.dh-select {
  font-family: var(--font-body);
  font-size: var(--t-body);
  background: var(--surface-card-bg);
  color: var(--surface-text);
  border: var(--border-thin) solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 10px 36px 10px 14px;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.dh-select:focus {
  outline: none;
  border-color: var(--color-primary-fill);
  box-shadow: var(--focus-ring);
}

/* ---------- INPUT GROUP ---------- */
.dh-input-group {
  display: flex;
  align-items: center;
  background: var(--surface-card-bg);
  border: var(--border-thin) solid var(--surface-border);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}
.dh-input-group:focus-within {
  border-color: var(--color-primary-fill);
  box-shadow: var(--focus-ring);
}
.dh-input-group__icon {
  padding: 0 10px 0 14px;
  color: var(--surface-muted);
  display: flex;
  align-items: center;
}
.dh-input-group input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 14px 12px 0;
  font-size: var(--t-body);
  color: var(--surface-text);
  outline: none;
  font-family: var(--font-body);
}
.dh-input-group input::placeholder { color: var(--surface-muted); }

/* ---------- FORM FIELD ---------- */
.dh-form-field { display: flex; flex-direction: column; gap: 6px; }
.dh-form-field__label {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  color: var(--surface-text);
}
.dh-form-field__helper {
  font-size: var(--t-caption);
  color: var(--surface-muted);
}
.dh-form-field__error {
  font-size: var(--t-caption);
  color: var(--signal-error);
}

/* ---------- TABS ----------
   Wraps when narrow. inline-flex would shrink-to-fit content and
   overflow the parent. flex + flex-wrap respects parent width. */
.dh-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--surface-card-bg);
  padding: 4px;
  border-radius: var(--radius-md);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  max-width: 100%;
  min-width: 0;
  width: fit-content;
}
.dh-tabs__btn {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--surface-text-secondary);
  cursor: pointer;
  transition: var(--transition-base);
}
.dh-tabs__btn:hover { color: var(--surface-text); }
/* Active tab uses brand-tinted bg + text from the 12-step scale.
   Works identically in light + dark because steps 3 + 11 auto-flip. */
.dh-tabs__btn.is-active {
  background: var(--accent-3);
  color: var(--accent-11);
  box-shadow: var(--shadow-xs);
}

/* ---------- TOGGLE GROUP (segmented) ---------- */
.dh-toggle-group {
  display: inline-flex;
  flex-wrap: wrap;
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}
.dh-toggle-group__btn {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  padding: 8px 14px;
  border: 0;
  border-right: var(--border-thin) var(--border-style) var(--surface-border);
  background: var(--surface-card-bg);
  color: var(--surface-text);
  cursor: pointer;
  transition: var(--transition-base);
}
.dh-toggle-group__btn:last-child { border-right: 0; }
.dh-toggle-group__btn:hover { background: color-mix(in srgb, var(--surface-text) 6%, transparent); }
.dh-toggle-group__btn.is-active {
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
}

/* ---------- BREADCRUMB ---------- */
.dh-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--t-small);
  color: var(--surface-muted);
  min-width: 0;
}
.dh-breadcrumb a { color: inherit; text-decoration: none; }
.dh-breadcrumb a:hover { color: var(--surface-text); }
.dh-breadcrumb__sep { opacity: 0.5; }
.dh-breadcrumb__current {
  color: var(--surface-text);
  font-weight: var(--fw-medium);
}

/* ---------- PAGINATION ---------- */
.dh-pagination { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.dh-pagination__btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--border-thin) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  color: var(--surface-text-secondary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--t-small);
}
.dh-pagination__btn:hover {
  background: var(--surface-card-bg);
  color: var(--surface-text);
}
.dh-pagination__btn.is-active {
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
  border-color: var(--color-primary-fill);
}

/* ---------- TOP NAV ---------- */
.dh-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dh-nav__link {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--surface-text-secondary);
  text-decoration: none;
  transition: var(--transition-base);
}
.dh-nav__link:hover {
  color: var(--surface-text);
  background: color-mix(in srgb, var(--surface-text) 6%, transparent);
}
.dh-nav__link.is-active {
  color: var(--surface-text);
  background: var(--surface-card-bg);
}

/* ---------- SIDEBAR ---------- */
.dh-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  background: var(--surface-card-bg);
  border-right: var(--border-thin) var(--border-style) var(--surface-border);
}
.dh-sidebar__group {
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  text-transform: var(--case-label);
  letter-spacing: var(--tr-eyebrow);
  color: var(--surface-muted);
  padding: 14px 8px 6px;
}
.dh-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  color: var(--surface-text);
  text-decoration: none;
  transition: var(--transition-base);
}
.dh-sidebar__link:hover {
  background: color-mix(in srgb, var(--surface-text) 6%, transparent);
}
.dh-sidebar__link.is-active {
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
  font-weight: var(--fw-semi);
}
.dh-sidebar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- MENUBAR ---------- */
.dh-menubar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 4px;
  max-width: 100%;
  min-width: 0;
}
.dh-menubar__btn {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--surface-text);
  cursor: pointer;
}
.dh-menubar__btn:hover { background: color-mix(in srgb, var(--surface-text) 8%, transparent); }

/* ---------- DROPDOWN ---------- */
.dh-dropdown {
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: var(--shadow-md);
  min-width: 0;
  width: 220px;
  max-width: 100%;
  display: inline-flex;
  flex-direction: column;
}
.dh-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--t-small);
  color: var(--surface-text);
  cursor: pointer;
  user-select: none;
}
.dh-dropdown__item:hover { background: color-mix(in srgb, var(--surface-text) 8%, transparent); }
.dh-dropdown__item--destructive { color: var(--signal-error); }
.dh-dropdown__sep { height: 1px; background: var(--surface-border); margin: 4px 0; }
.dh-dropdown__shortcut { margin-left: auto; font-size: var(--t-caption); color: var(--surface-muted); }

/* ---------- ALERT ---------- */
.dh-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  background: var(--surface-card-bg);
  color: var(--surface-text);
}
/* SVG icons inherit color via stroke="currentColor". Each alert variant
   sets its own icon color to match the title tone. Dark surfaces auto-flip
   via cascade. */
.dh-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--surface-text);
}
.dh-alert--info .dh-alert__icon {
  color: var(--color-primary-text);
}
.dh-alert--success .dh-alert__icon {
  color: color-mix(in oklch, var(--signal-success), black 25%);
}
[data-surface="ink"] .dh-alert--success .dh-alert__icon,
[data-surface="deep"] .dh-alert--success .dh-alert__icon,
:root[data-scheme="dark"] .dh-alert--success .dh-alert__icon {
  color: color-mix(in oklch, var(--signal-success), white 25%);
}
.dh-alert--warning .dh-alert__icon {
  color: color-mix(in oklch, var(--signal-warning), black 30%);
}
:root[data-scheme="dark"] .dh-alert--warning .dh-alert__icon {
  color: color-mix(in oklch, var(--signal-warning), white 20%);
}
.dh-alert--error .dh-alert__icon {
  color: color-mix(in oklch, var(--signal-error), black 25%);
}
[data-surface="ink"] .dh-alert--error .dh-alert__icon,
[data-surface="deep"] .dh-alert--error .dh-alert__icon,
:root[data-scheme="dark"] .dh-alert--error .dh-alert__icon {
  color: color-mix(in oklch, var(--signal-error), white 25%);
}
.dh-alert__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--t-body);
  margin: 0 0 2px;
}
.dh-alert__body {
  font-size: var(--t-small);
  color: var(--surface-text-secondary);
  margin: 0;
}
.dh-alert--info {
  background: var(--color-primary-tint);
  border-color: color-mix(in srgb, var(--color-primary-fill)25%, transparent);
}
.dh-alert--info .dh-alert__title { color: var(--color-primary-text); }
.dh-alert--success {
  background: color-mix(in srgb, var(--signal-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--signal-success) 30%, transparent);
}
.dh-alert--warning {
  background: color-mix(in srgb, var(--signal-warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--signal-warning) 30%, transparent);
}
.dh-alert--error {
  background: color-mix(in srgb, var(--signal-error) 12%, transparent);
  border-color: color-mix(in srgb, var(--signal-error) 30%, transparent);
}
.dh-alert--error .dh-alert__title { color: color-mix(in oklch, var(--signal-error), black 25%); }
[data-surface="ink"] .dh-alert--error .dh-alert__title,
[data-surface="deep"] .dh-alert--error .dh-alert__title { color: color-mix(in oklch, var(--signal-error), white 25%); }

/* ---------- PROGRESS ---------- */
.dh-progress {
  width: 100%;
  height: 8px;
  background: var(--surface-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.dh-progress__bar {
  height: 100%;
  background: var(--color-primary-fill);
  border-radius: inherit;
  transition: width var(--motion-medium) var(--ease-out);
}

/* ---------- SKELETON ---------- */
.dh-skeleton {
  background: var(--surface-border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.dh-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-text) 8%, transparent), transparent);
  animation: dh-skeleton-shimmer 1.6s infinite;
}
@keyframes dh-skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---------- SPINNER ----------
   Base ring uses --gray-6 (Radix step 6 = subtle border) instead of
   --surface-border. surface-border in dark mode is too low-contrast
   against ink BG; the spinner renders as a half-arc that looks like ")"
   without the background ring visible. gray-6 stays visible in both modes. */
.dh-spinner {
  width: 20px;
  height: 20px;
  border: var(--border-med) var(--border-style) var(--gray-6);
  border-top-color: var(--color-primary-fill);
  border-radius: 50%;
  animation: dh-spinner 0.8s linear infinite;
  display: inline-block;
}
@keyframes dh-spinner { to { transform: rotate(360deg); } }

/* ---------- TOAST ---------- */
.dh-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
  max-width: 380px;
}
.dh-toast__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--t-small);
  margin: 0;
  color: var(--surface-text);
}
.dh-toast__body {
  font-size: var(--t-caption);
  color: var(--surface-text-secondary);
  margin: 2px 0 0;
}

/* ---------- TOOLTIP ---------- */
.dh-tooltip__bubble {
  display: inline-block;
  background: var(--surface-text);
  color: var(--surface-bg);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* ---------- POPOVER ---------- */
.dh-popover {
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-md);
  max-width: 280px;
}

/* ---------- DIALOG ---------- */
.dh-dialog {
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  width: 100%;
}
.dh-dialog__header { margin-bottom: 16px; }
.dh-dialog__title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: var(--fw-semi);
  margin: 0 0 4px;
  color: var(--surface-text);
}
.dh-dialog__desc {
  font-size: var(--t-body);
  color: var(--surface-text-secondary);
  margin: 0;
}
.dh-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* ---------- DRAWER ---------- */
.dh-drawer {
  background: var(--surface-card-bg);
  border-left: var(--border-thin) var(--border-style) var(--surface-border);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  width: 320px;
  height: 100%;
}

/* ---------- HOVER CARD ---------- */
.dh-hover-card {
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-md);
  max-width: 320px;
}

/* ---------- TABLE ---------- */
.dh-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--surface-text);
}
.dh-table th, .dh-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: var(--border-thin) var(--border-style) var(--surface-border);
}
.dh-table th {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  color: var(--surface-text-secondary);
  font-size: var(--t-caption);
  text-transform: var(--case-label);
  letter-spacing: var(--tr-eyebrow);
}
.dh-table tr:hover td { background: color-mix(in srgb, var(--surface-text) 4%, transparent); }
.dh-table tr:last-child td { border-bottom: 0; }

/* ---------- ACCORDION ---------- */
.dh-accordion { border-top: var(--border-thin) var(--border-style) var(--surface-border); }
.dh-accordion__item { border-bottom: var(--border-thin) var(--border-style) var(--surface-border); }
.dh-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--t-body);
  color: var(--surface-text);
}
.dh-accordion__chevron { transition: transform var(--motion-base) var(--ease-out); }
details[open] > summary .dh-accordion__chevron { transform: rotate(180deg); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.dh-accordion__panel {
  padding: 0 4px 16px;
  font-size: var(--t-body);
  color: var(--surface-text-secondary);
  line-height: var(--lh-body);
}

/* ---------- EMPTY STATE ---------- */
.dh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  border: 2px dashed var(--surface-border);
  border-radius: var(--radius-lg);
  color: var(--surface-text-secondary);
}
.dh-empty__icon { margin-bottom: 12px; opacity: 0.6; }
.dh-empty__title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: var(--fw-semi);
  color: var(--surface-text);
  margin: 0 0 4px;
}
.dh-empty__body {
  font-size: var(--t-body);
  margin: 0 0 16px;
}

/* ---------- CODE ---------- */
.dh-code-inline {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: color-mix(in srgb, var(--surface-text) 8%, transparent);
  color: var(--color-primary-text);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
/* Code block always reads as "terminal-dark" with a subtle lift so it's
   distinct from the page bg even in dark mode. width:100% forces the
   pre to fit its parent (pre's intrinsic width = longest line, which
   would otherwise blow out the parent). overflow-x:auto handles scroll. */
.dh-code-block {
  font-family: var(--font-mono);
  /* Why: code block syntax-highlighting uses fixed Dracula-style theme
     colors (#ededed text, #ff79c6 keyword, #f1fa8c string) regardless of
     brand. Code reads better with stable high-contrast syntax colors than
     with brand-tinted ones. Intentional non-brand chrome. */
  font-size: var(--t-small);
  background: color-mix(in srgb, var(--surface-ink) 92%, white);
  color: #ededed;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: var(--border-thin) var(--border-style) color-mix(in srgb, white 10%, transparent);
  overflow-x: auto;
  line-height: 1.5;
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.dh-code-block .tok-keyword { color: #ff79c6; }
.dh-code-block .tok-string { color: #f1fa8c; }
.dh-code-block .tok-comment { color: rgba(255,255,255,0.4); }

/* ---------- LIST ---------- */
.dh-list { list-style: none; padding: 0; margin: 0; }
.dh-list__item {
  padding: 12px 0;
  border-bottom: var(--border-thin) var(--border-style) var(--surface-border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.dh-list__item:last-child { border-bottom: 0; }

/* ---------- STEPPER ---------- */
.dh-stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dh-step { display: flex; align-items: center; gap: 8px; }
.dh-step__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  background: var(--surface-card-bg);
  border: var(--border-med) var(--border-style) var(--surface-border);
  color: var(--surface-text-secondary);
  flex-shrink: 0;
}
.dh-step.is-active .dh-step__circle {
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
  border-color: var(--color-primary-fill);
}
.dh-step.is-done .dh-step__circle {
  background: var(--surface-text);
  color: var(--surface-bg);
  border-color: var(--surface-text);
}
.dh-step__label {
  font-family: var(--font-display);
  font-size: var(--t-small);
  color: var(--surface-text-secondary);
}
.dh-step.is-active .dh-step__label { color: var(--surface-text); font-weight: var(--fw-semi); }
.dh-step__connector { flex: 1; height: 2px; background: var(--surface-border); margin: 0 12px; min-width: 24px; }

/* ---------- CARD VARIANTS ---------- */
.dh-card-feature {
  padding: 24px;
  border-radius: var(--card-radius);
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dh-card-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  color: var(--color-primary-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dh-card-pricing {
  padding: 32px 24px;
  border-radius: var(--card-radius);
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;
  container-name: dh-pricing;
}
@container dh-pricing (max-width: 280px) {
  .dh-card-pricing { padding: 24px 18px; }
  .dh-card-pricing__price { font-size: var(--t-display-sm); }
}
.dh-card-pricing--featured {
  border-color: var(--color-primary-fill);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}
.dh-card-pricing__price {
  font-family: var(--font-display);
  font-size: var(--t-display-md);
  font-weight: var(--fw-bold);
  color: var(--surface-text);
  line-height: 1;
}
.dh-card-pricing__period {
  font-size: var(--t-small);
  color: var(--surface-text-secondary);
}
.dh-card-pricing__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dh-card-pricing__features li {
  font-size: var(--t-small);
  color: var(--surface-text-secondary);
  padding-left: 22px;
  position: relative;
}
.dh-card-pricing__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary-text);
  font-weight: var(--fw-bold);
}

.dh-card-stat {
  padding: 20px;
  border-radius: var(--card-radius);
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dh-card-stat__label {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  color: var(--surface-text-secondary);
  text-transform: var(--case-label);
  letter-spacing: var(--tr-eyebrow);
  font-weight: var(--fw-semi);
}
.dh-card-stat__value {
  font-family: var(--font-display);
  font-size: var(--t-display-sm);
  font-weight: var(--fw-bold);
  color: var(--surface-text);
  line-height: 1;
}
.dh-card-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  color: var(--signal-success);
}
.dh-card-stat__delta--down { color: var(--signal-error); }

.dh-card-testimonial {
  padding: 24px;
  border-radius: var(--card-radius);
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dh-card-testimonial__quote {
  font-size: var(--t-lead);
  color: var(--surface-text);
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: 1.5;
}
.dh-card-testimonial__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

/* ---------- DIVIDERS ---------- */
.dh-divider-vertical { width: 1px; background: var(--surface-border); align-self: stretch; }

/* ---------- ASPECT RATIO ---------- */
.dh-aspect {
  position: relative;
  width: 100%;
  background: var(--surface-card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-thin) var(--border-style) var(--surface-border);
}
.dh-aspect--16-9 { aspect-ratio: 16 / 9; }
.dh-aspect--4-3 { aspect-ratio: 4 / 3; }
.dh-aspect--1-1 { aspect-ratio: 1 / 1; }

/* ---------- CALENDAR ---------- */
.dh-calendar {
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 14px;
  width: fit-content;
}
.dh-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  color: var(--surface-text);
}
.dh-calendar__grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }
.dh-calendar__dow {
  font-size: var(--t-caption);
  color: var(--surface-muted);
  text-align: center;
  padding: 4px 0;
  font-weight: var(--fw-semi);
}
.dh-calendar__day {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--t-caption);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--surface-text);
  border: 0;
  background: transparent;
}
.dh-calendar__day:hover { background: color-mix(in srgb, var(--surface-text) 6%, transparent); }
.dh-calendar__day.is-today { background: var(--color-primary-tint); color: var(--color-primary-text); font-weight: var(--fw-semi); }
.dh-calendar__day.is-selected { background: var(--color-primary-fill); color: var(--text-on-primary-auto, var(--text-on-primary, white)); }
.dh-calendar__day.is-other-month { color: var(--surface-muted); opacity: 0.5; }

/* ---------- DATE PICKER ---------- */
.dh-date-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--surface-text);
  cursor: pointer;
}

/* ---------- SEARCH BAR ---------- */
.dh-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  width: 100%;
}
.dh-search-bar input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--surface-text);
  font-size: var(--t-body);
  font-family: var(--font-body);
}
.dh-search-bar input::placeholder { color: var(--surface-muted); }

/* ---------- COMMAND PALETTE ---------- */
.dh-command {
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  width: 100%;
  max-width: 420px;
}
.dh-command__input {
  border-bottom: var(--border-thin) var(--border-style) var(--surface-border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dh-command__input input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--surface-text);
  font-size: var(--t-body);
  font-family: var(--font-body);
}
.dh-command__group { padding: 8px 4px; }
.dh-command__group-label {
  font-size: var(--t-caption);
  color: var(--surface-muted);
  text-transform: var(--case-label);
  letter-spacing: var(--tr-eyebrow);
  font-weight: var(--fw-semi);
  padding: 4px 12px 8px;
}
.dh-command__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--t-small);
  color: var(--surface-text);
  cursor: pointer;
}
.dh-command__item:hover { background: color-mix(in srgb, var(--surface-text) 8%, transparent); }

/* ============================================================
   COMPONENT LIBRARY v2.4.0 — Batch 2
   5 new components + state utilities + print + noise texture
   ============================================================ */

/* ---------- COMBOBOX (input + filterable dropdown) ---------- */
.dh-combobox {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.dh-combobox__input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card-bg);
  border: var(--border-thin) solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 140ms ease-out;
}
.dh-combobox__input:hover { border-color: var(--color-element-border-hover); }
.dh-combobox__input input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--surface-text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  min-width: 0;
}
.dh-combobox__input input::placeholder { color: var(--surface-muted); }
.dh-combobox__chevron { color: var(--surface-muted); flex-shrink: 0; }
.dh-combobox__panel {
  margin-top: 4px;
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.dh-combobox__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: var(--t-small);
  color: var(--surface-text);
  cursor: pointer;
}
.dh-combobox__option:hover,
.dh-combobox__option.is-active { background: var(--accent-3); color: var(--accent-12); }
.dh-combobox__option--selected::after {
  content: '✓';
  margin-left: auto;
  color: var(--color-primary-text);
  font-weight: var(--fw-bold);
}

/* ---------- CAROUSEL (horizontal scroll-snap track) ---------- */
.dh-carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--space-md);
  padding-bottom: var(--space-sm);
  margin: 0 calc(var(--space-md) * -1);
  padding-inline: var(--space-md);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-border) transparent;
}
.dh-carousel::-webkit-scrollbar { height: 6px; }
.dh-carousel::-webkit-scrollbar-track { background: transparent; }
.dh-carousel::-webkit-scrollbar-thumb {
  background: var(--surface-border);
  border-radius: 999px;
}
.dh-carousel__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 280px;
  max-width: 80%;
}

/* ---------- SHEET (slide-over panel + overlay) ---------- */
.dh-sheet {
  position: relative;
  background: var(--surface-card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 400px;
}
.dh-sheet__backdrop {
  background: var(--gray-2);
  padding: var(--space-lg);
  color: var(--surface-text-secondary);
  font-size: var(--t-small);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-style: italic;
}
.dh-sheet__panel {
  background: var(--surface-card-bg);
  border-left: var(--border-thin) var(--border-style) var(--surface-border);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);
}
.dh-sheet__title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: var(--fw-semi);
  color: var(--surface-text);
  margin: 0;
}
.dh-sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-muted);
  cursor: pointer;
}

/* ---------- BANNER (top-of-page announcement) ---------- */
.dh-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--accent-3);
  color: var(--accent-12);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.dh-banner__icon { color: var(--color-primary-text); flex-shrink: 0; }
.dh-banner__cta {
  margin-left: auto;
  color: var(--accent-12);
  text-decoration: underline;
  font-weight: var(--fw-semi);
}
.dh-banner--solid {
  background: var(--color-primary-fill);
  color: var(--text-on-primary-auto, var(--text-on-primary, white));
}
.dh-banner--solid .dh-banner__cta,
.dh-banner--solid .dh-banner__icon { color: var(--text-on-primary-auto, var(--text-on-primary, white)); }

/* ---------- STATUS INDICATOR (online dot + label) ---------- */
.dh-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-small);
  color: var(--surface-text-secondary);
  font-family: var(--font-body);
}
.dh-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-7);
  flex-shrink: 0;
  position: relative;
}
.dh-status--online .dh-status__dot {
  background: var(--signal-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-success) 25%, transparent);
}
.dh-status--online .dh-status__dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--signal-success);
  opacity: 0.4;
  animation: dh-status-pulse 2s ease-out infinite;
}
@keyframes dh-status-pulse {
  0%   { transform: scale(1);   opacity: 0.4; }
  100% { transform: scale(2.2); opacity: 0; }
}
.dh-status--away .dh-status__dot { background: var(--signal-warning); }
.dh-status--busy .dh-status__dot { background: var(--signal-error); }
.dh-status--offline .dh-status__dot { background: var(--gray-7); }

/* ============================================================
   STATE UTILITIES — apply to any component for state styling
   ============================================================ */

/* Loading state — overlays a spinner, dims content */
.is-loading {
  position: relative;
  pointer-events: none;
  user-select: none;
}
.is-loading > * { opacity: 0.4; transition: opacity 200ms ease; }
.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: var(--border-med) var(--border-style) var(--gray-6);
  border-top-color: var(--color-primary-fill);
  border-radius: 50%;
  animation: dh-spinner 0.8s linear infinite;
  opacity: 1;
}

/* Disabled state */
.is-disabled,
[disabled],
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Success state — soft success wash + border */
.is-success {
  background: color-mix(in srgb, var(--signal-success) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--signal-success) 35%, transparent) !important;
}

/* Error state — soft error wash + border */
.is-error {
  background: color-mix(in srgb, var(--signal-error) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--signal-error) 35%, transparent) !important;
}

/* Selected / active state */
.is-selected {
  background: var(--accent-3);
  color: var(--accent-12);
  border-color: var(--accent-7);
}

/* ============================================================
   NOISE TEXTURE OVERLAY — opt-in atmospheric grain
   Apply data-texture="noise" on body or any container.
   Adds a subtle SVG-noise overlay to give surfaces depth.
   ============================================================ */
[data-texture="noise"] {
  position: relative;
  isolation: isolate;
}
[data-texture="noise"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.04;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
}
[data-scheme="dark"] [data-texture="noise"]::before { opacity: 0.06; }

/* ============================================================
   PRINT STYLESHEET — readable PDF / paper export
   Strips chrome, forces high-contrast, hides interactive elements.
   ============================================================ */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .demo-control-bar,
  .btn,
  .dh-toast,
  .dh-tooltip__bubble,
  .dh-popover,
  .dh-dropdown,
  .dh-banner,
  .demo-cell__label {
    display: none !important;
  }
  .dh-card,
  .dh-card-feature,
  .dh-card-pricing,
  .demo-cell {
    background: white !important;
    border: var(--border-thin) var(--border-style) #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .dh-display-xl,
  .dh-display-lg,
  .dh-display-md,
  .dh-display-sm,
  .dh-title { color: black !important; page-break-after: avoid; }
  /* Why: @media print uses fixed black/gray (#222, #555) because print
     is monochrome and brand color doesn't render meaningfully on paper.
     Intentional non-brand chrome for print output only. */
  .dh-body,
  .dh-lead,
  p { color: #222 !important; }
  .dh-code-block {
    background: #f5f5f5 !important;
    color: black !important;
    border: var(--border-thin) var(--border-style) #ccc !important;
  }
  a { color: black !important; text-decoration: underline !important; }
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #555;
  }
  @page { margin: 2cm; }
}

/* ============================================================
   MESH GRADIENT BACKGROUNDS (v2.6.0)
   ============================================================
   Drop data-mesh="X" on any container for atmospheric background.
   Each preset uses the active brand pack's scale steps so the
   gradient harmonizes with whatever theme is loaded.
   ============================================================ */

[data-mesh] {
  position: relative;
  isolation: isolate;
  background: var(--surface-bg);
}

/* Aurora — soft diagonal sweep across two brand colors. Default vibe. */
[data-mesh="aurora"] {
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, var(--accent-a4), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 85%, var(--accent-a3), transparent 55%),
    var(--surface-bg);
}

/* Nebula — rich layered swirl. Dramatic, hero-ready. */
[data-mesh="nebula"] {
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, var(--accent-a5), transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 70%, color-mix(in oklch, var(--brand-secondary) 30%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--accent-a3), transparent 55%),
    var(--surface-bg);
}

/* Sunrise — warm horizon glow at top. Editorial, optimistic. */
[data-mesh="sunrise"] {
  background:
    linear-gradient(180deg, var(--accent-a3) 0%, transparent 40%),
    radial-gradient(ellipse 80% 30% at 50% 0%, var(--accent-a5), transparent 70%),
    var(--surface-bg);
}

/* Sunset — warm glow at bottom + soft diagonal. Calmer than nebula. */
[data-mesh="sunset"] {
  background:
    linear-gradient(0deg, var(--accent-a3) 0%, transparent 50%),
    radial-gradient(ellipse 70% 30% at 50% 100%, var(--accent-a5), transparent 65%),
    radial-gradient(ellipse 40% 30% at 90% 60%, color-mix(in oklch, var(--brand-secondary) 25%, transparent), transparent 60%),
    var(--surface-bg);
}

/* Spotlight — single concentrated radial. Subtle, focused. */
[data-mesh="spotlight"] {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--accent-a4), transparent 70%),
    var(--surface-bg);
}

/* Conic — rotating brand colors. Bold, modern. */
[data-mesh="conic"] {
  background:
    conic-gradient(
      from 200deg at 30% 30%,
      var(--accent-a3),
      color-mix(in oklch, var(--brand-secondary) 25%, transparent),
      var(--accent-a4),
      var(--accent-a3)
    ),
    var(--surface-bg);
}

/* ============================================================
   SCROLL-DRIVEN ANIMATIONS (v2.8.0)
   ============================================================
   Drop a class on any section. CSS scroll-timeline drives the
   animation natively. Browsers without support gracefully ignore
   the animation rules, content still shows.

   Browser support: Chrome 115+, Edge 115+, Safari 17.4+, Opera
   101+. Firefox doesn't support yet, content stays visible.

   Use sparingly. One or two reveal effects per page is plenty.
   Density and motion personalities both auto-tune the timing.
   ============================================================ */

@supports (animation-timeline: view()) {
  /* Fade-in only — content fades from 0 to 1 as it enters viewport */
  .scroll-fade {
    animation: dh-scroll-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes dh-scroll-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Rise — fade + translate up from below */
  .scroll-rise {
    animation: dh-scroll-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes dh-scroll-rise {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Settle — fade + slight scale, gentle */
  .scroll-settle {
    animation: dh-scroll-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes dh-scroll-settle {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Parallax — slower than scroll, atmospheric */
  .scroll-parallax {
    animation: dh-scroll-parallax linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes dh-scroll-parallax {
    from { transform: translateY(-40px); }
    to   { transform: translateY(40px); }
  }

  /* Reading progress bar — apply to a fixed-position bar to
     visualize page scroll progress. Uses scroll() not view(). */
  .scroll-progress {
    transform-origin: left center;
    animation: dh-scroll-progress linear both;
    animation-timeline: scroll();
  }
  @keyframes dh-scroll-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* Reduced-motion preference always wins */
@media (prefers-reduced-motion: reduce) {
  .scroll-fade,
  .scroll-rise,
  .scroll-settle,
  .scroll-parallax {
    animation: none !important;
  }
}

/* ============================================================
   END components-v2.css (v2.8.0)
   ============================================================ */


/* ============================================================
   ROUND 15.42 PHASE 4 — v1.4 dial wiring (2026-05-16)
   ============================================================
   These rules make the icon-stroke, imagery-radius, imagery-filter,
   and focus-style dials reach into the editor preview cards.
   CSS beats SVG presentation attributes per spec, so the hardcoded
   stroke-width="1.8" on inline SVGs gets overridden when --icon-stroke
   has a value (which /system/ provides for all 3 iconStroke values).
   ============================================================ */

/* Inline preview SVGs consume the icon-stroke dial. */
.ed-bold svg,
.ed-card svg,
.ed-prev svg {
  stroke-width: var(--icon-stroke);
}

/* Imagery-radius + imagery-filter dials reach figures and images
   inside preview content blocks. Card chrome (icon containers etc)
   stays static via more-specific rules. */
.ed-bold figure,
.ed-bold img,
.ed-card__body figure,
.ed-card__body img,
.ed-prev figure,
.ed-prev img {
  border-radius: var(--imagery-radius);
  filter: var(--imagery-filter);
}


/* ============================================================
   ROUND 15.44 — Imagery card styles (2026-05-16)
   ============================================================ */
.ed-im {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ed-im__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ed-im__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-bg);
}
.ed-im__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* These two lines are the demonstration. /system/'s imageryRadius +
     imageryFilter dials cascade here in real time. */
  border-radius: var(--imagery-radius);
  filter: var(--imagery-filter);
  transition: border-radius var(--motion-base) var(--ease-out),
              filter var(--motion-base) var(--ease-out);
}
.ed-im__readout {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--block-radius);
}
@media (max-width: 540px) {
  .ed-im__readout { grid-template-columns: 1fr; }
}
.ed-im__row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
}
.ed-im__label {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--surface-text-secondary, var(--surface-text));
  opacity: 0.7;
}
.ed-im__value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t-small);
  color: var(--color-primary-text);
}
.ed-im__hint {
  margin: 0;
  font-size: var(--t-caption);
  color: var(--surface-text);
  opacity: 0.65;
  line-height: 1.5;
}


/* ============================================================
   ROUND 15.49 — Brand Intelligence card (2026-05-16)
   ============================================================ */
.ed-bi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) {
  .ed-bi { grid-template-columns: 1fr; }
}
.ed-bi-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ed-bi-section__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ed-bi-section__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-primary-text);
}
.ed-bi-section__sub {
  margin: 0;
  font-size: var(--t-caption);
  color: var(--surface-text);
  opacity: 0.55;
  line-height: 1.4;
}
.ed-bi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ed-bi-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: var(--surface-card-bg);
  border: var(--border-thin) var(--border-style) var(--surface-border);
  border-radius: var(--pill-radius);
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: var(--fw-medium);
  color: var(--surface-text);
  white-space: nowrap;
}


/* ============================================================
   ROUND 15.50 — Color Ladder card + poetic color names (2026-05-16)
   ============================================================ */
.ed-ld {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ed-ld-family {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ed-ld-family__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-primary-text);
}
.ed-ld-row {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 0;
  border-radius: var(--block-radius);
  overflow: hidden;
  border: var(--border-thin) var(--border-style) var(--surface-border);
}
.ed-ld-step {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--motion-base) var(--ease-out);
}
.ed-ld-step:hover {
  transform: scale(1.06);
  z-index: 2;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--surface-text) 22%, transparent);
}
.ed-ld-step__num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t-caption);
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
  /* color is set inline per step via smart contrast logic in assign.colorLadder */
  pointer-events: none;
}

/* Poetic color names — Coolors-style adjective+noun label under each swatch */
.ed-cc-tile__poetic,
.ed-sf-tile__poetic {
  display: block;
  margin: 2px 0 6px;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--surface-text);
  opacity: 0.78;
  letter-spacing: -0.005em;
}