/* =================================================================
   xpflow Design System — Design Tokens
   ================================================================= */

:root {
  /* Core Palette — Dark Luxury */
  --xp-black:          #0A0A0A;
  --xp-black-warm:     #111111;
  --xp-charcoal:       #1A1A1A;
  --xp-graphite:       #2A2A2A;
  --xp-slate:          #3D3D3D;
  --xp-ash:            #6B6B6B;
  --xp-silver:         #999999;
  --xp-mist:           #C8C8C8;
  --xp-cloud:          #E8E8E8;
  --xp-white:          #F5F5F5;
  --xp-pure-white:     #FFFFFF;

  /* Accent — Warm Gold */
  --xp-accent:         #C9A84C;
  --xp-accent-light:   #D4BA6A;
  --xp-accent-dim:     #A68B3C;
  --xp-accent-muted:   rgba(201, 168, 76, 0.15);

  /* Typography */
  --font-display:      'Cormorant Garamond', Georgia, serif;
  --font-body:         'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Type Scale */
  --type-display:      5rem;
  --type-h1:           3.5rem;
  --type-h2:           2.5rem;
  --type-h3:           1.75rem;
  --type-h4:           1.25rem;
  --type-h5:           1rem;
  --type-body-lg:      1.125rem;
  --type-body:         1rem;
  --type-body-sm:      0.875rem;
  --type-caption:      0.75rem;
  --type-overline:     0.75rem;
  --type-stat:         4rem;
  --type-nav:          0.8125rem;

  /* Line Heights */
  --lh-display:        1.0;
  --lh-h1:             1.1;
  --lh-h2:             1.15;
  --lh-h3:             1.25;
  --lh-body:           1.7;

  /* Letter Spacing */
  --ls-display:        -0.03em;
  --ls-h1:             -0.02em;
  --ls-h2:             -0.015em;
  --ls-body:           0.01em;
  --ls-overline:       0.2em;
  --ls-nav:            0.1em;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max:     1280px;
  --container-wide:    1440px;
  --container-narrow:  800px;
  --nav-height:        80px;
  --prose-max-width:   38em;

  /* Transitions */
  --ease-out:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration-normal:   300ms;
  --duration-reveal:   800ms;

  /* Borders */
  --border-subtle:     1px solid rgba(255, 255, 255, 0.04);
  --border-solid:      1px solid var(--xp-graphite);

  /* Z-Index */
  --z-nav:             100;
  --z-mobile-menu:     999;
  --z-loader:          9999;
}

@media (max-width: 767px) {
  :root {
    --type-display:    2.75rem;
    --type-h1:         2.25rem;
    --type-h2:         1.75rem;
    --type-h3:         1.375rem;
    --type-stat:       2.75rem;
  }
}