/* ==========================================================================
   TOKENS.CSS — Exact Stitch Output Extraction
   ========================================================================== */

:root {
  /* ── Core Backgrounds ── */
  --bg: #0A0F1E;
  --surface: #16130e;
  --surface-dim: #16130e;
  --surface-low: #1e1b16;
  --surface-high: #2d2924;
  --bg-slate-950: #020617; /* Used in header/footer */
  --header-bg: rgba(2, 6, 23, 0.6);

  /* ── Primary (Gold) ── */
  --gold: #C5A059;
  --gold-light: #e9c176;
  
  /* Gold opacities */
  --gold-20: rgba(197, 160, 89, 0.2);
  --gold-30: rgba(197, 160, 89, 0.3);
  --gold-50: rgba(197, 160, 89, 0.5);

  /* ── Glassmorphism ── */
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.05);

  /* ── Gradients ── */
  --hero-grad-1: rgba(10,15,30,0.5);
  --hero-grad-2: rgba(10,15,30,0.85);
  --hero-grad-3: rgba(10,15,30,0.95);

  /* ── Text ── */
  --on-surface: #ffffff;
  --on-surface-variant: rgba(255, 255, 255, 0.7); /* text-white/70 */
  --text-slate-400: #94a3b8;
  --text-slate-600: #475569;

  /* ── Typography ── */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --ui: 'Outfit', system-ui, sans-serif;

  /* ── Spacing ── */
  --container-max: 1280px;
  --section-gap: 120px;
  --margin-desktop: 64px;
  --margin-mobile: 16px;

  /* ── Radii ── */
  --r-sm: 0.25rem;
  --r-md: 0.5rem;   /* rounded-lg en Tailwind */
  --r-lg: 0.75rem;

  /* ── Shadows / Effects ── */
  --shadow-glow: 0 0 20px rgba(197, 160, 89, 0.3);
  --shadow-glow-sm: 0 0 20px rgba(197, 160, 89, 0.15);
  
  /* ── Transitions ── */
  --t-fast: 0.3s ease;
  --t-normal: 0.5s ease;
}

[data-theme="light"] {
  /* ── Core Backgrounds ── */
  --bg: #FDFCFB; /* Warmer, cleaner off-white */
  --surface: #FFFFFF;
  --surface-dim: #F3F4F6;
  --surface-low: #E5E7EB;
  --surface-high: #D1D5DB;
  --bg-slate-950: #FFFFFF; 
  --header-bg: rgba(253, 252, 251, 0.85);

  /* ── Primary (Gold) ── */
  --gold: #B8860B; /* DarkGoldenRod for better presence on light */
  --gold-light: #C5A059;
  
  /* Gold opacities */
  --gold-20: rgba(184, 134, 11, 0.1);
  --gold-30: rgba(184, 134, 11, 0.2);
  --gold-50: rgba(184, 134, 11, 0.4);

  /* ── Glassmorphism ── */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(184, 134, 11, 0.15);
  --glass-bg-hover: rgba(255, 255, 255, 0.9);

  /* ── Gradients ── */
  --hero-grad-1: rgba(253, 252, 251, 0.2); /* Much subtler */
  --hero-grad-2: rgba(253, 252, 251, 0.6);
  --hero-grad-3: rgba(253, 252, 251, 0.9);

  /* ── Text ── */
  --on-surface: #1A1C23;
  --on-surface-variant: #4B5563;
  --text-slate-400: #374151;
  --text-slate-600: #6B7280;

  /* ── Shadows / Effects ── */
  --shadow-glow: 0 10px 30px rgba(184, 134, 11, 0.15);
  --shadow-glow-sm: 0 5px 15px rgba(184, 134, 11, 0.1);
}