/* ==========================================================================
   Design System — Custom Properties
   Source: docs/homepage-copy.md
   ========================================================================== */

/* ---- Self-hosted Fonts: Very Vogue Serif ---- */
@font-face {
  font-family: 'Very Vogue Display';
  src: url('/assets/fonts/veryvogue-display-webfont.woff2') format('woff2'),
       url('/assets/fonts/veryvogue-display-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Very Vogue Display';
  src: url('/assets/fonts/veryvogue-display-italic-webfont.woff2') format('woff2'),
       url('/assets/fonts/veryvogue-display-italic-webfont.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Very Vogue Text';
  src: url('/assets/fonts/veryvogue-text-webfont.woff2') format('woff2'),
       url('/assets/fonts/veryvogue-text-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Very Vogue Text';
  src: url('/assets/fonts/veryvogue-text-italic-webfont.woff2') format('woff2'),
       url('/assets/fonts/veryvogue-text-italic-webfont.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Darks ---- */
  --color-deepest: #0c1013;       /* Footer background, darkest sections */
  --color-dark: #111917;          /* Body text, primary dark (replaces pure black) */
  --color-dark-green: #123322;    /* Nav background, dark section overlays, hero backgrounds */

  /* ---- Greens ---- */
  --color-forest: #1c5d40;        /* Headlines on light backgrounds, primary brand moments */
  --color-emerald: #26965d;       /* Hover states, active links, highlighted elements */

  /* ---- Blues ---- */
  --color-navy: #263d6e;          /* Section backgrounds (alternating with darks), depth */
  --color-cobalt: #131c96;        /* Very sparingly. Bold accent moments only */
  --color-slate: #3b6282;         /* Borders, secondary buttons, card backgrounds */
  --color-steel: #527a9a;         /* Supporting text on dark backgrounds */

  /* ---- Lights ---- */
  --color-cream: #FAFAF7;         /* Light neutral background, cool and airy */
  --color-ice: #bedbe7;           /* Cool light sections */
  --color-periwinkle: #a6c1dd;    /* Light accents, subtle borders on light sections */
  --color-soft-blue: #83adc2;     /* Subheads on dark backgrounds */
  --color-gray: #92a2ad;          /* Metadata, captions, tertiary text */

  /* ---- Gold ---- */
  --color-gold: #b88d5c;          /* Accent text, eyebrow labels, "Cheers to YOU!" */
  --gold-gradient: linear-gradient(135deg, #b88d5c 0%, #d4b078 25%, #f2d9a0 50%, #d4b078 75%, #b88d5c 100%);
  --gold-hover: linear-gradient(135deg, #d4b078 0%, #f2d9a0 25%, #fffbe6 50%, #f2d9a0 75%, #d4b078 100%);

  /* ---- Typography ---- */
  --font-display: 'Very Vogue Display', Georgia, serif;
  --font-display-text: 'Very Vogue Text', Georgia, serif;
  --font-eyebrow: 'Syne', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;

  /* ---- Spacing Scale ---- */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */

  /* ---- Section Padding ---- */
  --section-padding-y: var(--space-3xl);
  --section-padding-x: var(--space-lg);

  /* ---- Max Widths ---- */
  --max-width-content: 1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;

  /* ---- Transitions ---- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

/* ---- Responsive Overrides ---- */
@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--space-2xl);
    --section-padding-x: var(--space-sm);
  }
}