/* ==========================================================================
   DESIGN TOKENS - Architectural Warm Luxury & Swiss Precision
   Single Source of Truth for Colors, Typography, Spacing, and Elevation
   ========================================================================== */

:root {
  /* Light Mode (Warm Ivory & Bronze) */
  --bg-base: #F8F6F0;
  --surface-base: #F8F6F0;
  --surface-secondary: #ECE8DE;
  --surface-card: rgba(255, 255, 255, 0.72);
  --surface-card-hover: rgba(255, 255, 255, 0.92);

  --text-main: #18191B;
  --text-primary: #18191B;
  --text-secondary: #575550;
  --text-muted: #575550;
  --text-tertiary: #8C8982;

  --accent-gold: #8C6D42;
  --accent-gold-hover: #A38050;
  --accent-gold-soft: rgba(140, 109, 66, 0.12);
  --accent-amber: #A85A1D;
  --accent-amber-soft: rgba(168, 90, 29, 0.14);
  --accent-emerald: #1B4D36;
  --accent-emerald-bright: #2E8A5E;
  --accent-emerald-soft: rgba(27, 77, 54, 0.14);

  --border-hairline: rgba(24, 25, 28, 0.09);
  --border-hairline-hover: rgba(140, 109, 66, 0.35);
  --border-subtle: rgba(24, 25, 28, 0.15);

  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-hover: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(24, 25, 28, 0.1);
  --glass-border-hover: rgba(140, 109, 66, 0.45);
  --glass-shadow: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.95),
                  0 12px 32px -8px rgba(24, 25, 28, 0.08),
                  0 4px 12px -2px rgba(24, 25, 28, 0.04);
  --glass-glare: rgba(140, 109, 66, 0.15);
  --glass-bevel: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.08) 100%);
  --toast-shadow: 0 24px 48px -12px rgba(24, 25, 28, 0.18), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);

  --orb-opacity-1: 0.18;
  --orb-opacity-2: 0.14;
  --orb-opacity-3: 0.12;

  /* Font Families */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", monospace;

  /* Fluid Typography Scale */
  --text-2xl: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --text-xl: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
  --text-lg: clamp(1.0625rem, 1.2vw + 0.5rem, 1.25rem);
  --text-base: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
  --text-sm: clamp(0.75rem, 0.3vw + 0.65rem, 0.875rem);
  --text-xs: clamp(0.6875rem, 0.2vw + 0.625rem, 0.75rem);

  /* Spacing Scale */
  --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;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Easing curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   DARK MODE OVERRIDES - Deep Obsidian & Warm Champagne
   ========================================================================== */
html.dark {
  --bg-base: #0B0C0E;
  --surface-base: #0B0C0E;
  --surface-secondary: #121316;
  --surface-card: rgba(24, 25, 28, 0.65);
  --surface-card-hover: rgba(34, 36, 40, 0.85);

  --text-main: #F4F1EA;
  --text-primary: #F4F1EA;
  --text-secondary: #9A9891;
  --text-muted: #9A9891;
  --text-tertiary: #686660;

  --accent-gold: #C8A97E;
  --accent-gold-hover: #DFC49E;
  --accent-gold-soft: rgba(200, 169, 126, 0.12);
  --accent-amber: #D48C46;
  --accent-amber-soft: rgba(212, 140, 70, 0.14);
  --accent-emerald: #2E5A44;
  --accent-emerald-bright: #3EB075;
  --accent-emerald-soft: rgba(62, 176, 117, 0.15);

  --border-hairline: rgba(244, 241, 234, 0.08);
  --border-hairline-hover: rgba(200, 169, 126, 0.35);
  --border-subtle: rgba(244, 241, 234, 0.14);

  --glass-bg: rgba(24, 25, 28, 0.65);
  --glass-bg-hover: rgba(34, 36, 40, 0.85);
  --glass-border: rgba(244, 241, 234, 0.08);
  --glass-border-hover: rgba(200, 169, 126, 0.35);
  --glass-shadow: inset 0 1px 1px 0 rgba(244, 241, 234, 0.12),
                  0 4px 20px -2px rgba(0, 0, 0, 0.5),
                  0 24px 48px -12px rgba(0, 0, 0, 0.65);
  --glass-glare: rgba(200, 169, 126, 0.16);
  --glass-bevel: linear-gradient(180deg, rgba(244, 241, 234, 0.22) 0%, rgba(244, 241, 234, 0.05) 40%, rgba(244, 241, 234, 0.01) 100%);
  --toast-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.65), inset 0 1px 1px 0 rgba(244, 241, 234, 0.15);

  --orb-opacity-1: 0.42;
  --orb-opacity-2: 0.32;
  --orb-opacity-3: 0.28;
}