/* ==========================================================================
   Variables — colors, spacing, radii, shadows, transitions, z-index,
   fonts, breakpoints. No selectors other than :root here.
   ========================================================================== */

:root {
  /* Colors */
  --jet-black: #111111;
  --pure-white: #FFFFFF;
  --champagne-gold: #C8A96A;
  --warm-ivory: #FAF8F5;
  --soft-stone: #F1EFEA;
  --charcoal: #2B2B2B;
  --warm-gray: #6B6B6B;
  --light-gray: #D8D8D8;
  --very-light-gray: #F6F6F6;
  --gold-soft: rgba(200, 169, 106, 0.14);
  --gold-ring: rgba(200, 169, 106, 0.40);

  /* Semantic colors */
  --bg-page: var(--pure-white);
  --bg-alt: var(--warm-ivory);
  --surface-card: var(--soft-stone);
  --text-primary: var(--charcoal);
  --text-secondary: var(--warm-gray);
  --text-on-dark: var(--pure-white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.66);
  --accent: var(--champagne-gold);
  --border: var(--light-gray);

  /* Fonts */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-editorial: "Cormorant Garamond", Georgia, serif;

  /* Layout */
  --content-max: 1240px;

  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 44px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 130px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 8px 30px rgba(17, 17, 17, 0.05);
  --shadow-card: 0 12px 40px rgba(17, 17, 17, 0.06);
  --shadow-raised: 0 24px 70px rgba(17, 17, 17, 0.10);

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.2s var(--ease-soft);
  --transition-base: 0.28s var(--ease-soft);
  --transition-slow: 0.38s var(--ease-soft);

  /* Z-index scale */
  --z-header: 60;
  --z-mobile-menu: 70;
  --z-modal: 100;

  /* Breakpoints (reference only — used in responsive.css media queries) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1240px;
}