/* ==========================================================================
   OMNIFLONEX AI — ULTRA-LUXURY DESIGN TOKENS & DUAL THEME ENGINE
   Unified 100% with OmniflonexAi.com Main Website Design System
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Brand Core Palettes */
  --blue: #059669;
  --gold: #D4AF37;
  --magenta: #047857;
  --green: #10B981;
  --red: #EF4444;
  --white: #0F172A;

  /* Surface & Background (Light Canvas — Pearl Ivory & White) */
  --bg: #F8FAF8;
  --bg-primary: #F8FAF8;
  --bg-secondary: #FAFBF9;
  --surface: #FFFFFF;
  --surface-alt: #F4FAF6;
  --surface-elevated: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.88);
  --mint: #E5F4ED;
  --mint-light: #F2FAF5;
  --mint-accent: #D2ECE0;

  /* Brand Accents — Liquid Gold & Deep Emerald */
  --emerald: #059669;
  --emerald-deep: #047857;
  --emerald-dark: #064E3B;
  --emerald-glow: rgba(5, 150, 105, 0.28);
  --teal: #073F36;
  --teal-dark: #042621;
  --teal-deepest: #021714;

  --champagne: #D4AF37;
  --champagne-light: #FEF3C7;
  --champagne-glow: rgba(212, 175, 55, 0.30);

  /* Typography Colors (High Contrast WCAG AA > 4.5:1 compliant) */
  --text: #0F172A;
  --text-primary: #12372C;
  --text-secondary: #2D4E44;
  --text-muted: #52796F;
  --muted: #52796F;
  --dim: #64748B;
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #A3C2BA;

  /* Borders & Glassmorphism */
  --border: rgba(6, 78, 59, 0.12);
  --border-glow: rgba(5, 150, 105, 0.35);
  --border-light: rgba(5, 150, 105, 0.14);
  --border-subtle: rgba(6, 78, 59, 0.10);
  --border-emerald: rgba(5, 150, 105, 0.38);
  --border-gold: rgba(212, 175, 55, 0.40);

  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-bg-subtle: rgba(255, 255, 255, 0.78);
  --glass-bg-dark: rgba(6, 78, 59, 0.94);
  --glass-border: rgba(5, 150, 105, 0.18);
  --glass-blur: blur(24px);

  /* Gradients */
  --grad-emerald: linear-gradient(135deg, #059669 0%, #10B981 100%);
  --grad-gold: linear-gradient(135deg, #D4AF37 0%, #F59E0B 100%);
  --grad-brand: linear-gradient(135deg, #064E3B 0%, #059669 50%, #D4AF37 100%);
  --grad-hero-text: linear-gradient(135deg, #0F172A 0%, #064E3B 50%, #059669 100%);

  /* Shadows */
  --shadow-blue: 0 0 35px rgba(5, 150, 105, 0.18);
  --shadow-gold: 0 0 35px rgba(212, 175, 55, 0.22);
  --shadow-magenta: 0 0 35px rgba(4, 120, 87, 0.18);
  --shadow-card: 0 16px 45px rgba(6, 78, 59, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);

  --shadow-xs: 0 2px 8px rgba(6, 78, 59, 0.04);
  --shadow-sm: 0 4px 20px rgba(6, 78, 59, 0.06);
  --shadow-md: 0 12px 36px rgba(6, 78, 59, 0.09);
  --shadow-lg: 0 24px 60px rgba(6, 78, 59, 0.12);
  --shadow-emerald: 0 10px 30px rgba(5, 150, 105, 0.25);

  /* Fonts */
  --font-h: 'Syne', 'Space Grotesk', sans-serif;
  --font-b: 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Syne', 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* Animation Timings */
  --dur: 0.28s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* System Dark Mode / Dark Exhibition */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #021714;
    --bg-primary: #021714;
    --bg-secondary: #042621;
    --surface: #073F36;
    --surface-alt: #064E3B;
    --surface-elevated: #084D42;
    --bg-card: rgba(7, 63, 54, 0.85);
    --mint: #0F3A32;
    --mint-light: #05221D;
    --mint-accent: #15483E;

    --emerald: #10B981;
    --emerald-deep: #059669;
    --emerald-dark: #047857;
    --emerald-glow: rgba(16, 185, 129, 0.35);
    --teal: #064E3B;
    --teal-dark: #021714;
    --teal-deepest: #010B0A;

    --gold: #D4AF37;
    --champagne: #FEF3C7;
    --champagne-light: #1A1404;
    --champagne-glow: rgba(212, 175, 55, 0.38);

    --text: #FFFFFF;
    --text-primary: #FFFFFF;
    --text-secondary: #E2E8F0;
    --text-muted: #A3C2BA;
    --muted: #A3C2BA;
    --dim: #64748B;
    --text-inverse: #0F172A;
    --text-inverse-muted: #475569;

    --border: rgba(16, 185, 129, 0.22);
    --border-glow: rgba(16, 185, 129, 0.45);
    --border-light: rgba(16, 185, 129, 0.22);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-emerald: rgba(16, 185, 129, 0.45);
    --border-gold: rgba(212, 175, 55, 0.45);

    --glass-bg: rgba(7, 63, 54, 0.90);
    --glass-bg-subtle: rgba(4, 38, 33, 0.80);
    --glass-bg-dark: rgba(2, 23, 20, 0.96);
    --glass-border: rgba(16, 185, 129, 0.28);

    --grad-hero-text: linear-gradient(135deg, #FFFFFF 0%, #A7F3D0 50%, #D4AF37 100%);

    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
    --shadow-emerald: 0 10px 30px rgba(16, 185, 129, 0.28);
    --shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.32);
    --shadow-card: 0 16px 45px rgba(0, 0, 0, 0.4), 0 0 25px rgba(5, 150, 105, 0.12);
  }
}

/* Explicit Dark Theme Class */
[data-theme="dark"] {
  --bg: #021714;
  --bg-primary: #021714;
  --bg-secondary: #042621;
  --surface: #073F36;
  --surface-alt: #064E3B;
  --surface-elevated: #084D42;
  --bg-card: rgba(7, 63, 54, 0.85);
  --mint: #0F3A32;
  --mint-light: #05221D;
  --mint-accent: #15483E;

  --emerald: #10B981;
  --emerald-deep: #059669;
  --emerald-dark: #047857;
  --emerald-glow: rgba(16, 185, 129, 0.35);
  --teal: #064E3B;
  --teal-dark: #021714;
  --teal-deepest: #010B0A;

  --gold: #D4AF37;
  --champagne: #FEF3C7;
  --champagne-light: #1A1404;
  --champagne-glow: rgba(212, 175, 55, 0.38);

  --text: #FFFFFF;
  --text-primary: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted: #A3C2BA;
  --muted: #A3C2BA;
  --dim: #64748B;
  --text-inverse: #0F172A;
  --text-inverse-muted: #475569;

  --border: rgba(16, 185, 129, 0.22);
  --border-glow: rgba(16, 185, 129, 0.45);
  --border-light: rgba(16, 185, 129, 0.22);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-emerald: rgba(16, 185, 129, 0.45);
  --border-gold: rgba(212, 175, 55, 0.45);

  --glass-bg: rgba(7, 63, 54, 0.90);
  --glass-bg-subtle: rgba(4, 38, 33, 0.80);
  --glass-bg-dark: rgba(2, 23, 20, 0.96);
  --glass-border: rgba(16, 185, 129, 0.28);

  --grad-hero-text: linear-gradient(135deg, #FFFFFF 0%, #A7F3D0 50%, #D4AF37 100%);

  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-emerald: 0 10px 30px rgba(16, 185, 129, 0.28);
  --shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.32);
  --shadow-card: 0 16px 45px rgba(0, 0, 0, 0.4), 0 0 25px rgba(5, 150, 105, 0.12);
}