/* ───────────────────────────────────────────────────────────
   VARIABLES CSS — GLOBAL LUXURY DESIGN TOKENS
   ─────────────────────────────────────────────────────────── */
:root {
  /* ── 1. GLOBAL COLOR TOKENS ── */
  --color-ink: #0A0A0A;
  --color-white: #FFFFFF;
  --color-paper: #F8F9FA;
  --color-navy: #000080;
  --color-electric-blue: #4A68FF;
  --color-muted: #666666;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.15);
  --color-overlay: rgba(0, 0, 0, 0.45);

  /* Legacy Colors (Mapped to prevent breaking old pages) */
  --color-enterprise-blue: var(--color-electric-blue);
  --color-coreline-blue: #4C6EF5;
  --color-deep-navy: var(--color-navy);
  --color-yellow: #FFE84A;
  --color-gold-cta: #FFCD00;
  --color-peritus-orange: #FF3601;
  --color-priority-red: #E63946;
  --color-black: var(--color-ink);
  --color-footer-black: #111111;
  --color-charcoal: #1A1A1A;
  --color-text-gray: var(--color-muted);
  --color-cool-gray: var(--color-paper);
  --color-coreline-gray: #F5F7F8;
  --color-warm-offwhite: #FBFAFA;

  /* ── 2. TYPOGRAPHY TOKENS ── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --display-xl: clamp(4rem, 7vw, 7.5rem);
  --display-lg: clamp(3rem, 5vw, 5.5rem);
  --display-md: clamp(2.5rem, 4vw, 5rem);
  --heading-lg: clamp(2rem, 3vw, 3.5rem);
  --heading-md: clamp(1.75rem, 2.5vw, 2.5rem);
  --body-lg: clamp(1.125rem, 1.25vw, 1.25rem);
  --body-md: 1.125rem;
  --body-sm: 1rem;
  --caption: 0.875rem;

  /* Legacy Typographic Variables */
  --text-7xl: var(--display-xl);
  --text-6xl: var(--display-lg);
  --text-5xl: var(--display-md);
  --text-4xl: var(--heading-lg);
  --text-3xl: var(--heading-md);
  --text-2xl: clamp(1.4rem, 2vw, 2rem);
  --text-xl: clamp(1.25rem, 1.5vw, 1.5rem);
  --text-lg: var(--body-lg);
  --text-base: var(--body-md);
  --text-sm: var(--body-sm);
  --text-xs: var(--caption);
  --text-meta: 0.75rem;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* ── 3. SPACING & GRID TOKENS ── */
  --container-max: 1440px;
  --container-wide: 1600px;
  --container-padding: clamp(1.5rem, 4vw, 4rem);

  /* Section Spacing */
  --section-padding: clamp(80px, 8vw, 120px);
  --section-padding-lg: clamp(120px, 12vw, 180px);
  
  --nav-height-desktop: 90px;
  --nav-height-mobile: 70px;

  /* Incremental Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;
  --space-40: 160px;

  /* ── 4. ANIMATION TOKENS ── */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 250ms var(--ease-smooth);
  --transition-medium: 400ms var(--ease-premium);
  --transition-slow: 700ms var(--ease-premium);

  /* Legacy Transitions */
  --transition-base: var(--transition-medium);
  --transition-slower: 800ms var(--ease-premium);

  /* ── 5. BORDERS & DEPTH ── */
  --border-thin: 1px solid var(--color-border);
  --border-light: 1px solid var(--color-border-light);
  --border-medium: 1px solid rgba(0,0,0,0.15);
  
  --shadow-sm: 0 4px 20px rgba(0,0,0,0.03);
  --shadow-md: 0 10px 40px rgba(0,0,0,0.06);

  /* ── 6. Z-INDEX ── */
  --z-overlay: 900;
  --z-navbar: 1000;
  --z-mobile-menu: 1100;
}