/* ============================================================
   DH SYSTEM v2 — TAILWIND v4 BRIDGE
   ============================================================
   This is the ONLY file that touches Tailwind. If you ever swap
   Tailwind for UnoCSS, Panda, vanilla CSS, or any future utility
   framework, replace this file and Layers 1-3 keep working.

   The @theme inline directive auto-generates Tailwind utilities
   from DH tokens. Components like:
     bg-paper      → background: var(--color-paper)
     text-ink      → color: var(--color-ink)
     bg-primary    → background: var(--color-primary)
     font-display  → font-family: var(--font-display)
     p-md          → padding: var(--spacing-md)
     rounded-card  → border-radius: var(--radius-card)

   `inline` is critical — it keeps var() refs LIVE in generated
   utility CSS so runtime brand-pack swap flows through. Without
   it, values would freeze at build time. Confirmed via shadcn/ui
   Tailwind v4 migration docs.

   LOAD ORDER:
     1. tokens-v2.css (Layer 1 + 2 ground truth)
     2. THIS FILE (Layer 0 bridge)
     3. components-v2.css (Layer 3)
     4. Per-page templates (Layer 4)
   ============================================================ */

@theme inline {
  /* Why: Tailwind v4 @theme inline block re-exposes /system/ tokens as
     Tailwind utility classes (bg-primary, text-primary-fill, etc). The
     self-reference pattern is intentional — Tailwind's compiler reads
     these declarations to generate utility classes that resolve to the
     LIVE /system/ tokens at runtime, not static values. Without this
     bridge, Tailwind utilities lose brand-engine awareness. NOT a stale
     shadow. */

  /* Color utilities — read from DH brand + surface tokens */
  --color-primary: var(--color-primary);
  --color-primary-text: var(--color-primary-text);
  --color-primary-fill: var(--color-primary-fill);
  --color-primary-tint: var(--color-primary-tint);
  --color-primary-soft: var(--color-primary-soft);
  --color-primary-hover: var(--color-primary-hover);

  --color-secondary: var(--color-secondary);
  --color-secondary-text: var(--color-secondary-text);
  --color-secondary-fill: var(--color-secondary-fill);
  --color-secondary-tint: var(--color-secondary-tint);
  --color-secondary-soft: var(--color-secondary-soft);

  --color-accent: var(--color-accent);
  --color-accent-text: var(--color-accent-text);

  --color-deep: var(--color-deep);

  --color-paper: var(--surface-paper);
  --color-tone: var(--surface-tone);
  --color-ink: var(--surface-ink);

  --color-bg: var(--surface-bg);
  --color-fg: var(--surface-text);
  --color-fg-secondary: var(--surface-text-secondary);
  --color-fg-muted: var(--surface-muted);
  --color-card: var(--surface-card-bg);
  --color-border-default: var(--surface-border);
  --color-eyebrow: var(--surface-eyebrow);

  --color-success: var(--signal-success);
  --color-warning: var(--signal-warning);
  --color-error: var(--signal-error);

  /* 12-step scales exposed to utilities */
  --color-accent-1: var(--accent-1);
  --color-accent-2: var(--accent-2);
  --color-accent-3: var(--accent-3);
  --color-accent-4: var(--accent-4);
  --color-accent-5: var(--accent-5);
  --color-accent-6: var(--accent-6);
  --color-accent-7: var(--accent-7);
  --color-accent-8: var(--accent-8);
  --color-accent-9: var(--accent-9);
  --color-accent-10: var(--accent-10);
  --color-accent-11: var(--accent-11);
  --color-accent-12: var(--accent-12);

  --color-gray-1: var(--gray-1);
  --color-gray-2: var(--gray-2);
  --color-gray-3: var(--gray-3);
  --color-gray-4: var(--gray-4);
  --color-gray-5: var(--gray-5);
  --color-gray-6: var(--gray-6);
  --color-gray-7: var(--gray-7);
  --color-gray-8: var(--gray-8);
  --color-gray-9: var(--gray-9);
  --color-gray-10: var(--gray-10);
  --color-gray-11: var(--gray-11);
  --color-gray-12: var(--gray-12);

  /* Font utilities */
  --font-display: var(--font-display);
  --font-body: var(--font-body);
  --font-mono: var(--font-mono);

  /* Spacing utilities — DH semantic spacing */
  --spacing-2xs: var(--space-2xs);
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --spacing-2xl: var(--space-2xl);
  --spacing-3xl: var(--space-3xl);
  --spacing-4xl: var(--space-4xl);

  /* Radius utilities */
  --radius-card: var(--card-radius);
  --radius-btn: var(--btn-radius);
  --radius-pill: var(--pill-radius);
  --radius-xs: var(--radius-xs);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);

  /* Type-scale utilities */
  --text-caption: var(--t-caption);
  --text-small: var(--t-small);
  --text-body: var(--t-body);
  --text-lead: var(--t-lead);
  --text-title: var(--t-title);
  --text-display-sm: var(--t-display-sm);
  --text-display-md: var(--t-display-md);
  --text-display-lg: var(--t-display-lg);
  --text-display-xl: var(--t-display-xl);
}