:root {
  /* === COLORS === */
  /* Primary accent — gold (unchanged) */
  --color-gold: #d5a847;
  --color-gold-light: #e8c96e;
  --color-gold-dark: #b8892e;
  --color-gold-muted: rgba(213, 168, 71, 0.15);

  /* Secondary accent — salmon (NEW) */
  --color-salmon: #e8b4a0;
  --color-salmon-soft: #f4d6c8;
  --color-salmon-deep: #d99a82;

  /* Light surfaces — ekru / cream family */
  --color-cream: #f5efe4;
  --color-cream-deep: #ece4d4;
  --color-cream-soft: #faf6ee;
  --color-white: #ffffff;

  /* Warm ink (text on light) */
  --color-ink: #2a221c;
  --color-ink-soft: #5a4f44;
  --color-ink-muted: #8a7f72;

  /* Hairlines / borders (warm beige) */
  --color-line: #e0d6c4;
  --color-line-strong: #c9bda6;

  /* Warm dark (only for explicit dark "moments": hero overlays, CTA banner overlays) */
  --color-bg-dark: #1a1410;
  --color-bg-dark-deep: #0f0b08;

  /* === LEGACY COMPAT (old token names remapped to light-theme values) === */
  /* Components still reference these directly; remapping avoids touching every selector. */
  --color-black: var(--color-ink);
  --color-charcoal: var(--color-cream-deep);
  --color-dark: var(--color-ink);
  --color-gray-900: var(--color-cream-deep);
  --color-gray-800: var(--color-line);
  --color-gray-700: var(--color-line-strong);
  --color-gray-400: var(--color-ink-muted);
  --color-gray-200: var(--color-ink-soft);
  --color-gray-100: var(--color-cream-soft);

  /* === SEMANTIC === */
  --color-bg-primary: var(--color-cream);
  --color-bg-secondary: var(--color-cream-deep);
  --color-bg-elevated: var(--color-white);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: var(--color-ink-soft);
  --color-text-muted: var(--color-ink-muted);
  --color-accent: var(--color-gold);
  --color-accent-hover: var(--color-gold-dark);
  --color-accent-soft: var(--color-salmon);
  --color-on-accent: var(--color-ink);

  /* === TYPOGRAPHY === */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Outfit', 'Segoe UI', sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.45vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.15em;

  /* === SPACING === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --container-max: 1200px;
  --container-pad: clamp(1rem, 3vw, 2rem);

  /* Reserved space for the fixed navbar (logo height + vertical padding) */
  --navbar-height: 160px;

  /* === EFFECTS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-subtle: 0 2px 20px rgba(42, 34, 28, 0.06);
  --shadow-card: 0 4px 30px rgba(42, 34, 28, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(42, 34, 28, 0.12);
  --shadow-gold: 0 4px 30px rgba(213, 168, 71, 0.28);

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================
   DARK SURFACE MODIFIER
   For sections that should keep a dark, dramatic look
   (hero, CTA banner, mobile nav overlay). Re-maps semantic
   tokens locally so any nested component reads dark.
   ======================== */
.surface--dark {
  --color-bg-primary: var(--color-bg-dark);
  --color-bg-secondary: var(--color-bg-dark-deep);
  --color-bg-elevated: var(--color-bg-dark);
  --color-text-primary: var(--color-cream);
  --color-text-secondary: rgba(245, 239, 228, 0.78);
  --color-text-muted: rgba(245, 239, 228, 0.55);
  --color-line: rgba(245, 239, 228, 0.12);
  --color-line-strong: rgba(245, 239, 228, 0.22);
  --color-on-accent: var(--color-ink);

  color: var(--color-text-primary);
}