/* ==========================================================================
   Kashi Ki Shaam — Royal Indian Wedding Design Tokens (from bg-vivah.webp)
   60% Cream & Sandstone (#FFF4DF / #EBD3A8)
   30% Maroon & Wine (#6B1E2E / #4A1220)
   10% Gold, Marigold & Rose (#C9A24D / #F5C96A / #F29A1F / #C62A3C)
   ========================================================================== */

:root,
[data-theme="royal-kashi"] {
  /* Core Palette */
  --color-bg: #FFF4DF;
  --color-bg-alt: #F7E5C4;
  --color-surface: #EBD3A8;
  --color-surface-card: #FFF8EC;
  --color-surface-glass: rgba(255, 244, 223, 0.92);
  --color-primary: #6B1E2E;
  --color-primary-dark: #4A1220;
  --color-accent: #C9A24D;
  --color-accent-light: #F5C96A;
  --color-marigold: #F29A1F;
  --color-rose: #C62A3C;
  --color-night: #2B2A45;

  /* Primary Tints & Shades (Maroon / Wine Scale) */
  --primary-100: #F8E6E9;
  --primary-200: #ECC4CB;
  --primary-300: #D894A0;
  --primary-400: #BD5F70;
  --primary-500: #9E384B;
  --primary-600: #8A2A3A;
  --primary-700: #6B1E2E;
  --primary-800: #4A1220;
  --primary-900: #2E0A13;

  /* Accent Tints & Shades (Antique Gold Scale) */
  --accent-100: #FBF1D6;
  --accent-200: #F5C96A;
  --accent-300: #E8C77A;
  --accent-400: #C9A24D;
  --accent-500: #A8812F;
  --accent-600: #87631D;
  --accent-700: #664912;

  /* Text Hierarchy */
  --text-strong: #3A1F1A;
  --text-muted: #6E5448;
  --text-on-primary: #FFF4DF;
  --text-on-accent: #3A1F1A;
  --color-text: #3A1F1A;
  --heading-color: var(--color-primary);

  /* Gradients */
  --gradient-hero: linear-gradient(180deg, #4A1220 0%, #6B1E2E 55%, #8A2A3A 100%);
  --gradient-glow: radial-gradient(circle at 50% 70%, #F5C96A55, transparent 60%);
  --gradient-gold: linear-gradient(135deg, #E8C77A, #C9A24D 50%, #A8812F);
  --gradient-section-sand: radial-gradient(circle at 50% 25%, #FFF4DF 0%, #EBD3A8 100%);
  --gradient-section-maroon: radial-gradient(circle at 50% 25%, #8A2A3A 0%, #6B1E2E 55%, #4A1220 100%);

  /* Borders, Overlays & Tinted Shadows */
  --border: rgba(201, 162, 77, 0.45);
  --border-strong: rgba(201, 162, 77, 0.72);
  --divider: rgba(201, 162, 77, 0.45);
  --shadow: 0 8px 24px rgba(74, 18, 32, 0.18);
  --shadow-strong: 0 14px 36px rgba(74, 18, 32, 0.28);
  --shadow-glow: 0 0 22px rgba(245, 201, 106, 0.45);
  --hero-overlay: rgba(74, 18, 32, 0.55);
  --overlay-tint: rgba(74, 18, 32, 0.42);
  --overlay-center: rgba(255, 244, 223, 0.08);
  --edge-fade: rgba(74, 18, 32, 0.65);
  --header-bg: rgba(74, 18, 32, 0.96);
  --nav-bg: rgba(107, 30, 46, 0.95);
  --nav-pill-bg: rgba(255, 244, 223, 0.14);
  --avatar-glow: radial-gradient(circle at 50% 45%, rgba(245, 201, 106, 0.45) 0%, #6B1E2E 85%);
  --footer-avatar-bg: radial-gradient(circle, #FFF4DF 35%, #EBD3A8 100%);

  /* Interaction States */
  --hover: #F29A1F;
  --active: #A8812F;
  --focus-ring: 0 0 0 3px rgba(201, 162, 77, 0.55);
  --disabled: 0.6;

  /* Semantic States (harmonized) */
  --success: #1E5631;
  --success-bg: #EBF7EE;
  --success-border: #86C596;
  --warning: #7A4E0D;
  --warning-bg: #FDF5E6;
  --warning-border: #F29A1F;
  --error: #9E1C2B;
  --error-bg: #FDECEC;
  --error-border: #C62A3C;
  --info: #2B2A45;
  --info-bg: #EEF0F7;
  --info-border: #8E8DB5;

  /* Typography, Spacing & Layout Tokens */
  --font-heading-en: 'Italiana', Georgia, serif;
  --font-body-en: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --header-height: 52px;
  --nav-height: 56px;
  --radius-card: 24px;
  --radius-pill: 9999px;
  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Swappable Theme Variants (via <html data-theme="...">)
   ========================================================================== */
[data-theme="sage-cream"] {
  --color-bg: #FAFBF7;
  --color-surface: #E5EFE1;
  --color-surface-card: #FFFFFF;
  --color-surface-glass: rgba(255, 255, 255, 0.92);
  --color-primary: #35522D;
  --color-primary-dark: #23381E;
  --text-strong: #1B261A;
  --text-muted: #4D5E4B;
  --text-on-primary: #FAFBF7;
  --gradient-hero: linear-gradient(180deg, #23381E 0%, #35522D 55%, #4A6D40 100%);
  --gradient-section-sand: radial-gradient(circle at 50% 25%, #FAFBF7 0%, #E5EFE1 100%);
  --gradient-section-maroon: radial-gradient(circle at 50% 25%, #4A6D40 0%, #35522D 55%, #23381E 100%);
  --header-bg: rgba(35, 56, 30, 0.96);
  --nav-bg: rgba(53, 82, 45, 0.95);
}

[data-theme="navy-champagne"] {
  --color-bg: #F7F9FC;
  --color-surface: #E2EAF4;
  --color-surface-card: #FFFFFF;
  --color-surface-glass: rgba(255, 255, 255, 0.92);
  --color-primary: #1E3256;
  --color-primary-dark: #13203A;
  --text-strong: #111827;
  --text-muted: #4A5568;
  --text-on-primary: #F7F9FC;
  --gradient-hero: linear-gradient(180deg, #13203A 0%, #1E3256 55%, #2E4878 100%);
  --gradient-section-sand: radial-gradient(circle at 50% 25%, #F7F9FC 0%, #E2EAF4 100%);
  --gradient-section-maroon: radial-gradient(circle at 50% 25%, #2E4878 0%, #1E3256 55%, #13203A 100%);
  --header-bg: rgba(19, 32, 58, 0.96);
  --nav-bg: rgba(30, 50, 86, 0.95);
}

/* ==========================================================================
   Dark / Dusk Mode (uses --color-night #2B2A45 & wine #4A1220, cream & gold)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode="light"]) {
    --color-bg: #2B2A45;
    --color-bg-alt: #353354;
    --color-surface: #4A1220;
    --color-surface-card: #36101B;
    --color-surface-glass: rgba(54, 16, 27, 0.92);
    --accent-100: #4A1220;
    --text-strong: #FFF4DF;
    --text-muted: #EBD3A8;
    --color-text: #FFF4DF;
    --heading-color: var(--color-accent-light);
    --gradient-section-sand: radial-gradient(circle at 50% 25%, #353354 0%, #2B2A45 100%);
    --edge-fade: rgba(43, 42, 69, 0.80);
    --overlay-tint: rgba(43, 42, 69, 0.55);
    --shadow: 0 8px 24px rgba(15, 10, 25, 0.45);
    --shadow-strong: 0 14px 36px rgba(15, 10, 25, 0.60);
    --success: #86C596;
    --success-bg: #17301F;
    --error: #F5A3AC;
    --error-bg: #4A1220;
  }
}

[data-theme-mode="dark"] {
  --color-bg: #2B2A45;
  --color-bg-alt: #353354;
  --color-surface: #4A1220;
  --color-surface-card: #36101B;
  --color-surface-glass: rgba(54, 16, 27, 0.92);
  --accent-100: #4A1220;
  --text-strong: #FFF4DF;
  --text-muted: #EBD3A8;
  --color-text: #FFF4DF;
  --heading-color: var(--color-accent-light);
  --gradient-section-sand: radial-gradient(circle at 50% 25%, #353354 0%, #2B2A45 100%);
  --edge-fade: rgba(43, 42, 69, 0.80);
}

/* ==========================================================================
   High Contrast Accessibility Mode
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --border: var(--color-primary-dark);
    --border-strong: var(--color-primary-dark);
    --text-muted: var(--text-strong);
  }
}