/* ═══════════════════════════════════════════════════════════════════════════
   LUXURYWAY THEME SYSTEM v2.1 - COMPLETE REWRITE
   ═══════════════════════════════════════════════════════════════════════════
   
   FILE: css/theme-system.css
   
   This file controls ALL theming with BACKWARD COMPATIBILITY for existing code.
   - Maps old variable names (--bg-dark, --accent-gold) to new theme system
   - Dark Theme: Deep bluish blacks with silver/platinum accents
   - Light Theme: Warm cream/ivory with gold accents
   
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1: ROOT CONSTANTS (Theme-Independent)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Timing & Motion */
  --transition-theme: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.3s ease;
  
  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: 'Playfair Display', serif;
  
  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2: DARK THEME
   Deep bluish-black with silver/platinum accents
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* ──────────────────────────────────────────
     NEW THEME VARIABLES
     ────────────────────────────────────────── */
  
  /* Background Colors */
  --bg-primary: #02040a;
  --bg-secondary: #060a14;
  --bg-tertiary: #0a1020;
  --bg-elevated: #0f1628;
  
  /* Gradient Colors for Animation */
  --bg-gradient-start: #02040a;
  --bg-gradient-mid: #0f1b33;
  --bg-gradient-end: #02040a;
  --bg-gradient-accent: #141e38;
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-tertiary: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.4);
  
  /* Accent Colors - Silver/Platinum */
  --accent-primary: #C0C0C0;
  --accent-secondary: #E8E8E8;
  --accent-tertiary: #A0A0A0;
  --accent-gradient: linear-gradient(135deg, #A0A0A0 0%, #E8E8E8 50%, #C0C0C0 100%);
  --accent-glow: rgba(192, 192, 192, 0.3);
  
  /* Glass Morphism */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.06);
  --glass-bg-active: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-blur: 20px;
  --glass-saturate: 180%;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 30px rgba(192, 192, 192, 0.15);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.4);
  
  /* Borders */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.05);
  --border-default: 1px solid rgba(255, 255, 255, 0.1);
  --border-accent: 1px solid rgba(192, 192, 192, 0.3);
  
  /* Component Specific */
  --header-bg: rgba(2, 4, 10, 0.85);
  --header-border: rgba(255, 255, 255, 0.06);
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-bg-hover: rgba(255, 255, 255, 0.06);
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-focus: rgba(192, 192, 192, 0.4);
  --button-bg: rgba(255, 255, 255, 0.08);
  --button-bg-hover: rgba(255, 255, 255, 0.12);
  --footer-bg: rgba(0, 0, 0, 0.3);
  
  /* Logo & Images */
  --logo-filter: none;
  --logo-opacity: 1;
  
  /* Scrollbar */
  --scrollbar-track: rgba(255, 255, 255, 0.03);
  --scrollbar-thumb: rgba(192, 192, 192, 0.3);
  --scrollbar-thumb-hover: rgba(192, 192, 192, 0.5);
  
  /* ──────────────────────────────────────────
     BACKWARD COMPATIBILITY ALIASES
     Maps your existing variable names to theme
     ────────────────────────────────────────── */
  
  --bg-dark: #02040a;
  --bg-gradient: #0f1b33;
  --gold: #C0C0C0;
  --gold-light: #E8E8E8;
  --accent-gold: #C0C0C0;
  --light-gold: #E8E8E8;
  --text-main: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3: LIGHT THEME
   Warm cream/ivory with gold accents
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* ──────────────────────────────────────────
     NEW THEME VARIABLES
     ────────────────────────────────────────── */
  
  /* Background Colors */
  --bg-primary: #FAF8F5;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F5F2ED;
  --bg-elevated: #FFFFFF;
  
  /* Gradient Colors for Animation */
  --bg-gradient-start: #FAF8F5;
  --bg-gradient-mid: #EDE8E0;
  --bg-gradient-end: #FAF8F5;
  --bg-gradient-accent: #F0EBE3;
  
  /* Text Colors */
  --text-primary: #1A1A1A;
  --text-secondary: rgba(26, 26, 26, 0.75);
  --text-tertiary: rgba(26, 26, 26, 0.55);
  --text-muted: rgba(26, 26, 26, 0.4);
  
  /* Accent Colors - Deeper Gold */
  --accent-primary: #B8960C;
  --accent-secondary: #8B7209;
  --accent-tertiary: #D4AF37;
  --accent-gradient: linear-gradient(135deg, #8B7209 0%, #D4AF37 50%, #B8960C 100%);
  --accent-glow: rgba(184, 150, 12, 0.2);
  
  /* Glass Morphism - iOS Style (OPAQUE for light mode) */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-hover: rgba(255, 255, 255, 0.95);
  --glass-bg-active: rgba(255, 255, 255, 1);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.15);
  --glass-blur: 20px;
  --glass-saturate: 180%;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 30px rgba(184, 150, 12, 0.1);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.12);
  
  /* Borders */
  --border-subtle: 1px solid rgba(0, 0, 0, 0.04);
  --border-default: 1px solid rgba(0, 0, 0, 0.08);
  --border-accent: 1px solid rgba(184, 150, 12, 0.3);
  
  /* Component Specific */
  --header-bg: rgba(250, 248, 245, 0.9);
  --header-border: rgba(0, 0, 0, 0.06);
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-bg-hover: rgba(255, 255, 255, 1);
  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(0, 0, 0, 0.1);
  --input-border-focus: rgba(184, 150, 12, 0.5);
  --button-bg: rgba(0, 0, 0, 0.05);
  --button-bg-hover: rgba(0, 0, 0, 0.08);
  --footer-bg: rgba(255, 255, 255, 0.9);
  
  /* Logo & Images - Invert White Logos to Black */
  --logo-filter: invert(1) brightness(0.2);
  --logo-opacity: 0.9;
  
  /* Scrollbar */
  --scrollbar-track: rgba(0, 0, 0, 0.03);
  --scrollbar-thumb: rgba(184, 150, 12, 0.3);
  --scrollbar-thumb-hover: rgba(184, 150, 12, 0.5);
  
  /* ──────────────────────────────────────────
     BACKWARD COMPATIBILITY ALIASES
     Maps your existing variable names to theme
     ────────────────────────────────────────── */
  
  --bg-dark: #FAF8F5;
  --bg-gradient: #EDE8E0;
  --gold: #B8960C;
  --gold-light: #D4AF37;
  --accent-gold: #B8960C;
  --light-gold: #D4AF37;
  --text-main: #1A1A1A;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4: ANIMATED BACKGROUND SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* Background Container */
.theme-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--bg-primary);
  overflow: hidden;
  pointer-events: none;
}

/* Primary Gradient Orb - Top Center */
.theme-background::before {
  content: '';
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--bg-gradient-mid) 0%,
    var(--bg-gradient-accent) 35%,
    transparent 65%
  );
  filter: blur(80px);
  opacity: 0.7;
  animation: gradient-float-1 25s ease-in-out infinite;
}

/* Secondary Gradient Orb - Bottom Right */
.theme-background::after {
  content: '';
  position: absolute;
  width: 55vw;
  height: 55vw;
  max-width: 700px;
  max-height: 700px;
  bottom: -20%;
  right: -15%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--bg-gradient-accent) 0%,
    var(--bg-gradient-mid) 30%,
    transparent 60%
  );
  filter: blur(100px);
  opacity: 0.5;
  animation: gradient-float-2 30s ease-in-out infinite;
}

/* Third Gradient Orb - Left Side */
.theme-gradient-orb {
  position: fixed;
  width: 45vw;
  height: 45vw;
  max-width: 550px;
  max-height: 550px;
  top: 40%;
  left: -20%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--bg-gradient-mid) 0%,
    transparent 55%
  );
  filter: blur(90px);
  opacity: 0.4;
  z-index: -1;
  animation: gradient-float-3 35s ease-in-out infinite;
  pointer-events: none;
}

/* Gradient Animations */
@keyframes gradient-float-1 {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.6; }
  25% { transform: translateX(-45%) translateY(8%) scale(1.08); opacity: 0.75; }
  50% { transform: translateX(-55%) translateY(-5%) scale(0.95); opacity: 0.65; }
  75% { transform: translateX(-48%) translateY(4%) scale(1.03); opacity: 0.7; }
}

@keyframes gradient-float-2 {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.45; }
  33% { transform: translateY(-12%) translateX(-8%) scale(1.1); opacity: 0.55; }
  66% { transform: translateY(8%) translateX(5%) scale(0.92); opacity: 0.5; }
}

@keyframes gradient-float-3 {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.35; }
  40% { transform: translateY(-15%) translateX(10%) scale(1.12); opacity: 0.5; }
  70% { transform: translateY(10%) translateX(-5%) scale(0.9); opacity: 0.4; }
}

/* Subtle Noise Texture */
.theme-background-noise {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.012;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

[data-theme="light"] .theme-background-noise {
  opacity: 0.018;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: SMOOTH THEME TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Disable transitions on initial load */
.theme-no-transition,
.theme-no-transition * {
  transition: none !important;
}

/* Color scheme for form elements */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* Enable transitions after load */
body.themed,
body.themed *,
body.themed *::before,
body.themed *::after {
  transition: 
    background-color var(--transition-theme),
    border-color var(--transition-theme),
    box-shadow var(--transition-theme),
    color var(--transition-theme),
    fill var(--transition-theme),
    stroke var(--transition-theme),
    opacity var(--transition-theme),
    filter var(--transition-theme);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--glass-bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: all var(--transition-smooth);
}

/* Dark Mode: Show Sun */
[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

/* Light Mode: Show Moon */
[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7: SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8: UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.text-accent { color: var(--accent-primary); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-glass { background: var(--glass-bg); }
.bg-card { background: var(--card-bg); }

.border-subtle { border: var(--border-subtle); }
.border-default { border: var(--border-default); }
.border-accent { border: var(--border-accent); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-card { box-shadow: var(--shadow-card); }


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: RESPONSIVE & ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .theme-background::before,
  .theme-background::after {
    filter: blur(60px);
    opacity: 0.5;
  }
  
  .theme-gradient-orb {
    filter: blur(70px);
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-background::before,
  .theme-background::after,
  .theme-gradient-orb {
    animation: none;
  }
  
  body.themed *,
  body.themed *::before,
  body.themed *::after {
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .theme-background,
  .theme-gradient-orb,
  .theme-background-noise {
    display: none;
  }
}