/* =========================================================
   EXPOVATE — Design Tokens
   Centralized design system. All colors, type, spacing and
   motion values are defined here. Do not hard-code raw hex
   values or px sizes in component CSS — reference tokens.

   Palette intent (Phase 1.2): dark luxury dominant (~70%),
   warm ivory for breathing room (~20%), champagne gold /
   muted saffron used only as accents (~10%). Gold is never
   the dominant color of a section.
   ========================================================= */

:root {
  /* ---- Color: dark neutrals ---- */
  --color-primary-dark: #0C0C0F;    /* deep charcoal / near-black */
  --color-secondary-dark: #12162A;  /* deep navy / midnight */
  --color-charcoal-raised: #17192B; /* slightly lifted navy, for cards-on-dark */

  /* ---- Color: accents (used sparingly) ---- */
  --color-gold: #C9A46B;            /* warm champagne gold */
  --color-gold-bright: #E4C88C;     /* lighter gold for hover/highlight */
  --color-gold-soft: #C9A46B2E;     /* ~18% alpha, glows/borders */
  --color-saffron: #BE5A2E;         /* muted burnt orange — festive accent, used rarely */
  --color-saffron-soft: #BE5A2E22;

  /* ---- Color: light / neutral ---- */
  --color-bg-light: #F5F0E4;        /* warm ivory */
  --color-white: #FFFFFF;
  --color-text: #17140F;            /* warm near-black */
  --color-text-on-dark: #F5F0E4;
  --color-muted: #6E6656;           /* warm muted brown-grey */
  --color-muted-on-dark: #A7A5B8;
  --color-border: #E6DFCE;
  --color-border-on-dark: #272A40;
  --color-success: #3F7A56;
  --color-danger: #B3413A;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Regular hero/section display size */
  --fs-display: clamp(2.75rem, 6vw, 5.5rem);
  /* Mega editorial stacked headline (homepage signature moment only) */
  --fs-display-xl: clamp(3.25rem, 11vw, 9rem);
  --fs-h1: clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-caption: 0.8125rem;
  --fs-button: 0.875rem;
  --fs-nav: 0.8125rem;
  --fs-meta: 0.75rem;

  --lh-tight: 0.98;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  --ls-eyebrow: 0.14em;
  --ls-button: 0.06em;
  --ls-nav: 0.05em;

  /* ---- Spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);

  /* ---- Radius / Shadow / Border ---- */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(8, 8, 10, 0.06);
  --shadow-md: 0 16px 40px rgba(8, 8, 10, 0.16);
  --shadow-lg: 0 30px 70px rgba(8, 8, 10, 0.26);
  --shadow-gold-glow: 0 0 90px 10px rgba(201, 164, 107, 0.16);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-sticky-cta: 90;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}