/**
 * Origin X Digital (OXD) - Design Tokens & Variables (V3 Art Direction)
 * Color palette, monumental fluid typography scales, spacing rhythm, and elevation tokens
 */

:root {
  /* ==========================================================================
     1. Color Palette (Dark Atmospheric Identity + Warm Metallic Gold)
     ========================================================================== */
  --oxd-abyss: #050D22;        /* Primary deep atmospheric base */
  --oxd-navy: #0A1734;         /* Elevated surface card background */
  --oxd-navy-light: #101F44;   /* Interactive hover surface */
  --oxd-sapphire: #132552;     /* Ambient cool depth tone */
  --oxd-burgundy: #480E22;     /* Sub-surface warm depth tone */
  --oxd-wine: #8C1938;         /* Ambient warm highlight glow */
  
  /* Metallic Gold Accents */
  --oxd-gold: #D8B26A;         /* Primary metallic accent */
  --oxd-gold-bright: #F2D28E;  /* Highlight gold for active states */
  --oxd-gold-deep: #A8813C;    /* Secondary warm metallic border */
  --oxd-gold-glow: rgba(216, 178, 106, 0.16);
  --oxd-gold-muted: rgba(216, 178, 106, 0.28);

  /* Typographic Contrast Values */
  --oxd-cream: #F2ECE4;        /* Primary high-contrast typography */
  --oxd-muted: rgba(242, 236, 228, 0.70);  /* Secondary narrative body text */
  --oxd-subtle: rgba(242, 236, 228, 0.44); /* Tertiary metadata text */
  --oxd-faint: rgba(242, 236, 228, 0.10);  /* Structural hairline guides */

  /* Precision Borders & Hairlines */
  --oxd-line: rgba(216, 178, 106, 0.18);
  --oxd-line-active: rgba(216, 178, 106, 0.48);
  --oxd-line-dark: rgba(255, 255, 255, 0.07);

  /* ==========================================================================
     2. Typography Stack
     ========================================================================== */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Fluid Typography Scale */
  --text-monument: clamp(48px, 9vw, 114px);
  --text-expressive: clamp(22px, 3.4vw, 42px);
  --text-h1: clamp(34px, 5vw, 68px);
  --text-h2: clamp(26px, 3.8vw, 46px);
  --text-h3: clamp(20px, 2.4vw, 28px);
  --text-lead: clamp(16px, 1.25vw, 19px);
  --text-body: clamp(14px, 1.1vw, 16px);
  --text-small: 13px;
  --text-eyebrow: 11px;
  --text-metric: clamp(48px, 6vw, 80px);
  --text-anchor: clamp(28px, 4.2vw, 56px);

  /* Line Heights */
  --leading-none: 0.95;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.62;
  --leading-relaxed: 1.80;

  /* Letter Spacing (Tracking) */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-widest: 0.22em;

  /* ==========================================================================
     3. Spatial Grid & Layout
     ========================================================================== */
  --shell-max: 1240px;
  --shell-width: 90vw;
  --shell: min(var(--shell-max), var(--shell-width));
  --nav-height: 84px;

  /* Spacing Scale (8pt rhythm) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-5xl: 160px;

  /* ==========================================================================
     4. Elevation, Radii & Shadows
     ========================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-subtle: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-elevated: 0 24px 60px -16px rgba(0, 0, 0, 0.85);
  --shadow-gold: 0 12px 35px -5px rgba(216, 178, 106, 0.22);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 0.2s var(--ease-out-smooth);
  --transition-normal: 0.4s var(--ease-out-expo);
  --transition-slow: 0.8s var(--ease-out-expo);
}