/* ============================================================
   DESIGN TOKENS — Godrej Brooklyn Avenue campaign
   Navy + champagne gold, warmed by the Brooklyn sunset banner
   ============================================================ */

:root {
  /* Color */
  --color-navy-950: #070c18;
  --color-navy-900: #0b1220;
  --color-navy-800: #121a2e;
  --color-navy-700: #1c2740;
  --color-navy-600: #2a3a55;
  --color-navy-500: #3a4a68;

  --color-gold: #c9a36a;
  --color-gold-light: #e0c08a;
  --color-gold-soft: #e6d5bd;
  --color-gold-pale: #f3eadb;
  --color-sunset: #e08a4f;

  --color-cream: #f6f2ea;
  --color-cream-2: #ebe4d6;
  --color-sand: #e0dccf;

  --color-ink: #12141a;
  --color-body: #4a5160;
  --color-muted: #6d7482;
  --color-line: rgba(18, 29, 63, 0.1);
  --color-line-gold: rgba(201, 163, 106, 0.38);

  --color-on-dark: #f3f1ec;
  --color-on-dark-muted: #c5c0b6;
  --color-on-dark-line: rgba(255, 255, 255, 0.12);

  --color-white: #ffffff;
  --color-danger: #c0392b;
  --color-success: #2f7d4f;

  /* Typography */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.65rem, 2.4vw, 2.15rem);
  --fs-2xl: clamp(2.1rem, 4.2vw, 3.35rem);
  --fs-display: clamp(2.6rem, 5.4vw, 4.6rem);

  --tracking-tight: -0.03em;
  --tracking-wide: 0.12em;
  --tracking-wider: 0.2em;

  /* Spacing */
  --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.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;

  /* Layout */
  --container-max: 1240px;
  --container: min(92vw, var(--container-max));
  --container-narrow: min(92vw, 820px);
  --section-pad: clamp(4rem, 8vw, 7.5rem);

  /* Radius */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(7, 12, 24, 0.06);
  --shadow: 0 18px 50px rgba(7, 12, 24, 0.12);
  --shadow-lg: 0 40px 80px rgba(7, 12, 24, 0.28);
  --shadow-gold: 0 14px 36px rgba(201, 163, 106, 0.32);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 700ms;

  /* Header */
  --header-h: 88px;
  --header-h-mobile: 72px;
}