/* ============================================================
   Hunt Constructions — Design Tokens
   Warm & Earthy · Archivo + Source Sans 3 · Dramatic motion
   Implements DESIGN-SYSTEM.md as CSS custom properties.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --c-ink: #1C1B19;
  --c-ink-soft: #2A2825;
  --c-sand: #E8E1D5;
  --c-sand-deep: #D8CEBD;
  --c-paper: #FBF9F5;
  --c-timber: #6B4A2E;
  --c-timber-deep: #4A3220;
  --c-brass: #B08D57;
  --c-brass-bright: #C9A66B;
  --c-line: #C7BCA8;
  --c-line-dark: #3A372F;
  --c-muted: #6E665A;
  --c-muted-on-dark: #B6AE9F;
  --c-success: #3F7A55;
  --c-error: #A4402F;

  /* ---- Semantic surface roles ---- */
  --bg: var(--c-sand);
  --surface: var(--c-paper);
  --text: var(--c-ink);
  --text-muted: var(--c-muted);
  --accent: var(--c-brass);

  /* ---- Typography ----
     Editorial display serif (Fraunces) for quiet-luxury headlines,
     Archivo as the tracked uppercase LABEL/eyebrow face (structural builder voice),
     Source Sans 3 humanist body. */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-label: "Archivo", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-display: clamp(2.75rem, 1.4rem + 6vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --measure: 68ch;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --container: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* ---- Radii ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- Shadows (warm-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.06), 0 4px 12px rgba(74, 50, 32, 0.06);
  --shadow-md: 0 6px 18px rgba(28, 27, 25, 0.10), 0 2px 6px rgba(74, 50, 32, 0.08);
  --shadow-lg: 0 24px 60px rgba(28, 27, 25, 0.22), 0 8px 24px rgba(74, 50, 32, 0.14);
  --shadow-brass: 0 0 0 3px rgba(176, 141, 87, 0.45);

  /* ---- Motion ---- */
  --ease-door: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-ui: 240ms;
  --dur-door: 760ms;
  --dur-room: 320ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-drawer: 200;
  --z-transition: 9000;
}

/* Honor user preference: kill long/decorative motion globally. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-ui: 0ms;
    --dur-door: 0ms;
    --dur-room: 0ms;
  }
}