/* ==========================================================================
   VA HOME — Design Tokens
   Invisible Luxury Atmosphere
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --color-black: #080807;
  --color-deep-black: #0D0C0A;
  --color-charcoal: #171512;
  --color-walnut: #2A2119;
  --color-ivory: #E9DFD0;
  --color-warm-ivory: #D8C8B2;
  --color-stone: #B3A48F;
  --color-muted-text: #A99D8E;
  --color-gold: #B88A4B;
  --color-dark-gold: #856236;

  /* ---- Color: semantic ---- */
  --bg-primary: var(--color-black);
  --bg-secondary: var(--color-deep-black);
  --bg-elevated: var(--color-charcoal);
  --bg-contrast: var(--color-warm-ivory);
  --border-hairline: rgba(184, 138, 75, 0.22);
  --border-hairline-strong: rgba(184, 138, 75, 0.4);
  --text-primary: var(--color-ivory);
  --text-secondary: var(--color-muted-text);
  --text-on-contrast: var(--color-charcoal);
  --text-gold: var(--color-gold);
  --overlay-scrim: rgba(8, 8, 7, 0.55);

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.4rem, 4.6vw, 4.2rem);
  --fs-h2: clamp(1.7rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.7rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --ls-eyebrow: 0.18em;
  --ls-caption: 0.08em;
  --ls-button: 0.06em;

  /* ---- Spacing (8px base) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-height: 76px;
  --header-height-mobile: 64px;

  /* ---- Radius (minimal, near-square) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ---- Shadow (soft, near-invisible) ---- */
  --shadow-soft: 0 20px 48px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.22);
  --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.34);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}