/* =============================================================
   LBJ Empire — Design Tokens
   The single runtime source of truth for all visual values.
   See design/DESIGN_SYSTEM.md for human-readable documentation.
   ============================================================= */

:root {
  /* ---- Color: painted sky ---- */
  --sky-1: #f7c47a;
  --sky-2: #e88a4a;
  --sky-3: #a83e26;
  --sky-4: #3d1208;

  /* ---- Color: rock / ground ---- */
  --rock-1: #c97a3e;
  --rock-2: #7a3a1a;
  --rock-3: #2d1008;

  /* ---- Color: gold ---- */
  --gold: #f4d28a;        /* on dark backgrounds */
  --gold-deep: #b8852e;   /* on cream backgrounds */

  /* ---- Color: ink + paper ---- */
  --ink: #1a0a05;
  --paper: #fbe9c8;
  --paper-warm: #f5e2c0;

  /* ---- Color: hairlines ---- */
  --rule: rgba(26, 10, 5, 0.15);
  --rule-gold: rgba(244, 210, 138, 0.3);

  /* ---- Color: text on dark / on cream ---- */
  --text-on-dark: var(--paper);
  --text-on-dark-soft: rgba(251, 233, 200, 0.88);
  --text-on-cream: var(--ink);
  --text-on-cream-soft: rgba(26, 10, 5, 0.72);

  /* ---- Type: families ---- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Type: scale (fluid where appropriate) ---- */
  --text-display-xl: clamp(3rem, 6.5vw, 6rem);     /* hero headline */
  --text-display-lg: clamp(2.5rem, 4.8vw, 4.25rem); /* section titles */
  --text-display-md: clamp(1.75rem, 3.2vw, 2.625rem); /* doctrine quote */
  --text-h3: 1.875rem;
  --text-lead: 1.1875rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-mono-md: 0.6875rem;
  --text-mono-sm: 0.625rem;

  /* ---- Spacing (8pt grid) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 7.5rem;
  --space-12: 10rem;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --gutter-mobile: var(--space-6);
  --gutter-desktop: var(--space-9);

  /* ---- Borders ---- */
  --border-thin: 1px solid var(--rule);
  --border-thin-gold: 1px solid var(--rule-gold);
  --border-gold-strong: 1px solid var(--gold);

  /* ---- Motion ---- */
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
  --duration-cinematic: 1200ms;

  /* ---- Letter-spacing ---- */
  --tracking-display: -0.015em;
  --tracking-mono-loose: 0.4em;
  --tracking-mono: 0.3em;
  --tracking-mono-tight: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-cinematic: 0ms;
  }
}