/*! @crucible/design-system 0.1.0 (e95a491) — built 2026-05-26T04:32:08.542Z */
/* ─── Crucible3D design tokens ────────────────────────────────────────────────
   Source of truth for cross-stack design values. Tailwind v4 reads `@theme {}`
   and generates utility classes from these names. A flattened `:root {}` copy
   for non-Tailwind consumers (WP) is generated at build time as
   `tokens.compiled.css`.

   Never introduce hex codes outside this block. See docs/BRAND.md for the
   rationale behind each value. ────────────────────────────────────────────── */
:root {
  /* ─── Color: surfaces (BRAND.md § Color palette) ──────────────────────── */
  --color-bg:           #0E0A07;
  --color-surface-1:    #1A130C;
  --color-surface-2:    #261B12;

  /* Light "island" background — used in quoted regions where Crucible tokens
   * deliberately do not apply (3D viewer per P4a-8, WC cart thumbnails on a
   * dark page). Warm off-white that complements the bg without clashing. */
  --color-light-island: #f5f1ea;

  /* ─── Color: borders ──────────────────────────────────────────────────── */
  --color-border:       #3A2C1E;
  --color-border-strong:#5A4530;

  /* ─── Color: text ─────────────────────────────────────────────────────── */
  --color-text-primary:   #F5EFE6;
  --color-text-secondary: #B0A697;
  --color-text-tertiary:  #8B7E6E;

  /* ─── Color: accent ───────────────────────────────────────────────────── */
  --color-accent:         #FF6B1A;
  --color-accent-hover:   #FF8540;
  --color-accent-pressed: #E55A0E;
  --color-accent-muted:   #4A2A14;

  /* ─── Color: semantic ─────────────────────────────────────────────────── */
  --color-success: #65B964;
  --color-warning: #F5C518;
  --color-danger:  #E14B4B;
  --color-info:    #6FA8DC;

  /* ─── Typography: families (BRAND.md § Typography) ────────────────────────
     Fonts are self-hosted as variable woff2 inside this package — see
     base.css for the @font-face declarations. */
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Typography: type scale ──────────────────────────────────────────────
     Tailwind 4 reads --text-{name} as font-size and --text-{name}--line-height
     as line-height for the matching `text-{name}` utility.
     Display + H1 use clamp() so they scale down on mobile per BRAND.md:
       Display: 48px (mobile) → 72px (desktop)
       H1:      36px (mobile) → 48px (desktop) */
  --text-display:                  clamp(3rem, 4vw + 2rem, 4.5rem);
  --text-display--line-height:     1.05;
  --text-h1:                       clamp(2.25rem, 3vw + 1.5rem, 3rem);
  --text-h1--line-height:          1.1;
  --text-h2:                       2rem;       /* 32px  weight:700 tracking:-0.02em */
  --text-h2--line-height:          1.2;
  --text-h3:                       1.375rem;   /* 22px  weight:500 tracking:-0.01em */
  --text-h3--line-height:          1.3;
  --text-h4:                       1.125rem;   /* 18px  weight:500 */
  --text-h4--line-height:          1.4;
  --text-body:                     1rem;       /* 16px  weight:400 */
  --text-body--line-height:        1.6;
  --text-body-sm:                  0.875rem;   /* 14px  weight:400 */
  --text-body-sm--line-height:     1.55;
  --text-caption:                  0.75rem;    /* 12px  weight:500 tracking:0.08em */
  --text-caption--line-height:     1.4;
  --text-eyebrow:                  0.6875rem;  /* 11px  weight:500 tracking:0.15em uppercase */
  --text-eyebrow--line-height:     1.4;
  --text-mono:                     0.875rem;   /* 14px  Geist Mono */
  --text-mono--line-height:        1.5;
  --text-mono-sm:                  0.6875rem;  /* 11px  Geist Mono weight:500 */
  --text-mono-sm--line-height:     1.4;

  /* ─── Typography: letter-spacing (BRAND.md § Typography) ──────────────── */
  --tracking-display:    -0.04em;
  --tracking-h1:         -0.03em;
  --tracking-h2:         -0.02em;
  --tracking-h3:         -0.01em;
  --tracking-body:        0;
  --tracking-caption:     0.08em;
  --tracking-eyebrow:     0.15em;
  --tracking-mono-sm:     0.05em;

  /* ─── Borders & corners (BRAND.md § Borders and corners) ──────────────── */
  --radius-btn:       4px;
  --radius-card:      6px;
  --radius-container: 8px;
  --radius-pill:      999px;

  /* ─── Container widths ────────────────────────────────────────────────────
     Semantic names mirror the Width union in primitives/Container.tsx. WP
     theme reads the same vars. Per-page hardcoded max-w-* usages still work
     via Tailwind's default scale; they're out of scope for Phase 1. */
  --container-narrow:  48rem;   /* 768px  — long-form prose */
  --container-default: 72rem;   /* 1152px — most page surfaces */
  --container-wide:    80rem;   /* 1280px — hero, header, footer */
}