:root {
  /* ---- Brand core (navy + gold heritage) ---- */
  --color-navy: #16305f;
  --color-navy-dark: #0f2244;
  --color-navy-deep: #0a1830;
  --color-gold: #e0b94e;
  --color-gold-soft: #d9c27a;
  --color-gold-hover: #c9a63c;

  /* ---- Warm BBQ accents ---- */
  --color-ember: #c2410c;      /* smoky flame — primary warm accent */
  --color-ember-dark: #9a3009;
  --color-ember-soft: #e8734a;
  --color-teal: #2f9e8f;       /* retained brand teal, muted */

  /* ---- Neutrals (warm) ---- */
  --color-ink: #221c15;        /* body text — warm charcoal */
  --color-ink-soft: #4a4034;
  --color-text: #2b2419;
  --color-text-muted: #6f6656;
  --color-line: #e7ded0;       /* hairline borders */
  --color-surface: #ffffff;
  --color-cream: #faf6ee;      /* page background */
  --color-cream-alt: #f3ede1;
  --color-bg: #faf6ee;
  --color-bg-alt: #f1e9db;
  --color-danger: #c0392b;
  --color-success: #2f8f4e;

  /* ---- Typography ---- */
  --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Oswald', 'Open Sans', system-ui, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1.0625rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.375rem;
  --font-size-4xl: 3.25rem;
  --font-size-5xl: clamp(2.75rem, 6vw, 4.75rem);
  --line-height: 1.7;
  --line-height-tight: 1.12;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  /* ---- Layout ---- */
  --container-max: 76rem;
  --container-narrow: 46rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(22, 25, 40, 0.06), 0 2px 8px rgba(22, 25, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 24, 45, 0.10);
  --shadow-lg: 0 20px 50px rgba(15, 34, 68, 0.18);
  --shadow-gold: 0 10px 26px rgba(194, 65, 12, 0.28);

  --nav-height: 4.5rem;

  /* ---- Signature gradients ---- */
  --grad-navy: linear-gradient(150deg, #1c3a70 0%, #16305f 45%, #0f2244 100%);
  --grad-ember: linear-gradient(135deg, #e0742c 0%, #c2410c 55%, #9a3009 100%);
  --grad-gold: linear-gradient(135deg, #ecc766 0%, #e0b94e 55%, #c9a63c 100%);
}
