/* ==========================================================================
   Gujarati Calendar Mitra - Design System & Modern Aesthetics
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Rozha+One&display=swap');

:root {
  /* Primary Vibrant Vedic Palette */
  --primary-saffron: #e65100;
  --primary-saffron-light: #ff7d47;
  --primary-saffron-dark: #ac1900;
  --primary-gold: #ffb300;
  --primary-gold-light: #ffe57f;
  --primary-gold-dark: #c68400;
  --accent-vermillion: #d84315;
  --accent-marigold: #f57c00;
  
  /* Auspicious Choghadiya Status Colors */
  --color-amrit: #10b981;    /* Emerald Green - Best */
  --color-shubh: #059669;    /* Forest Green - Auspicious */
  --color-labh: #0d9488;     /* Teal - Beneficial */
  --color-char: #0284c7;     /* Sky Blue - Neutral/Moving */
  --color-udveg: #f97316;    /* Amber/Orange - Restless/Sun */
  --color-kaal: #e11d48;     /* Crimson - Harmful/Saturn */
  --color-rog: #dc2626;      /* Bright Red - Disease/Mars */

  /* Neutral Surface Colors (Vedic Dark Mode - Default) */
  --bg-app: #0c0f17;
  --bg-surface: #141926;
  --bg-card: #1c2336;
  --bg-card-hover: #232c44;
  --bg-glass: rgba(24, 30, 48, 0.75);
  --bg-glass-border: rgba(255, 179, 0, 0.18);
  
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-gold: #fbbf24;
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 179, 0, 0.3);
  
  /* Shadows & Elevations */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 4px 20px rgba(245, 124, 0, 0.35);
  --shadow-glow: 0 0 24px rgba(255, 179, 0, 0.25);
  
  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  /* Typography */
  --font-gujarati: 'Hind Vadodara', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-english: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Rozha One', 'Hind Vadodara', serif;
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   DARK THEME COLOR PALETTES (Default / data-mode="dark")
   ========================================================================== */

/* Celestial Midnight Dark Theme */
[data-theme="midnight"],
[data-color="midnight"] {
  --bg-app: #07090e;
  --bg-surface: #0d121d;
  --bg-card: #131b2e;
  --bg-card-hover: #19243d;
  --bg-glass: rgba(13, 18, 29, 0.85);
  --bg-glass-border: rgba(99, 102, 241, 0.25);
  --primary-saffron: #d946ef;
  --primary-gold: #38bdf8;
  --text-gold: #60a5fa;
  --shadow-gold: 0 4px 20px rgba(56, 189, 248, 0.25);
}

/* Sacred Morpankh Peacock Emerald Theme */
[data-theme="peacock"],
[data-color="peacock"] {
  --bg-app: #031c18;
  --bg-surface: #062b25;
  --bg-card: #0a3d34;
  --bg-card-hover: #0f4d42;
  --bg-glass: rgba(6, 43, 37, 0.85);
  --bg-glass-border: rgba(16, 185, 129, 0.3);
  --primary-saffron: #059669;
  --primary-gold: #38bdf8;
  --text-primary: #f0fdf4;
  --text-secondary: #a7f3d0;
  --text-gold: #34d399;
  --border-subtle: rgba(16, 185, 129, 0.15);
  --border-highlight: rgba(56, 189, 248, 0.35);
  --shadow-gold: 0 4px 20px rgba(16, 185, 129, 0.3);
}

/* Auspicious Kumkum / Sindoor Ruby Theme */
[data-theme="kumkum"],
[data-color="kumkum"] {
  --bg-app: #1a060b;
  --bg-surface: #290b13;
  --bg-card: #3b101c;
  --bg-card-hover: #4d1525;
  --bg-glass: rgba(41, 11, 19, 0.85);
  --bg-glass-border: rgba(244, 63, 94, 0.3);
  --primary-saffron: #e11d48;
  --primary-gold: #fbbf24;
  --text-primary: #fff1f2;
  --text-secondary: #fecdd3;
  --text-gold: #fbbf24;
  --border-subtle: rgba(244, 63, 94, 0.15);
  --border-highlight: rgba(251, 191, 36, 0.35);
  --shadow-gold: 0 4px 20px rgba(225, 29, 72, 0.3);
}

/* Royal Swarna Golden Amber Theme */
[data-theme="gold"],
[data-color="gold"] {
  --bg-app: #140d02;
  --bg-surface: #241804;
  --bg-card: #362406;
  --bg-card-hover: #483009;
  --bg-glass: rgba(36, 24, 4, 0.85);
  --bg-glass-border: rgba(245, 158, 11, 0.3);
  --primary-saffron: #d97706;
  --primary-gold: #fbbf24;
  --text-primary: #fffbeb;
  --text-secondary: #fde68a;
  --text-gold: #f59e0b;
  --border-subtle: rgba(245, 158, 11, 0.15);
  --border-highlight: rgba(251, 191, 36, 0.4);
  --shadow-gold: 0 4px 20px rgba(245, 158, 11, 0.35);
}

/* Neelkanth Sacred Shiva Ocean Blue Theme */
[data-theme="shiva"],
[data-color="shiva"] {
  --bg-app: #040e1f;
  --bg-surface: #0a1933;
  --bg-card: #102549;
  --bg-card-hover: #163261;
  --bg-glass: rgba(10, 25, 51, 0.85);
  --bg-glass-border: rgba(14, 165, 233, 0.3);
  --primary-saffron: #0284c7;
  --primary-gold: #38bdf8;
  --text-primary: #f0f9ff;
  --text-secondary: #bae6fd;
  --text-gold: #38bdf8;
  --border-subtle: rgba(14, 165, 233, 0.15);
  --border-highlight: rgba(56, 189, 248, 0.4);
  --shadow-gold: 0 4px 20px rgba(2, 132, 199, 0.35);
}

/* Tulsi Vrindavan Sacred Forest Theme */
[data-theme="forest"],
[data-color="forest"] {
  --bg-app: #06180c;
  --bg-surface: #0c2715;
  --bg-card: #13391f;
  --bg-card-hover: #1b4b2a;
  --bg-glass: rgba(12, 39, 21, 0.85);
  --bg-glass-border: rgba(34, 197, 94, 0.3);
  --primary-saffron: #15803d;
  --primary-gold: #a3e635;
  --text-primary: #f0fdf4;
  --text-secondary: #bbf7d0;
  --text-gold: #86efac;
  --border-subtle: rgba(34, 197, 94, 0.15);
  --border-highlight: rgba(163, 230, 53, 0.35);
  --shadow-gold: 0 4px 20px rgba(34, 197, 94, 0.3);
}

/* Sacred Lotus Pink Rose Theme */
[data-theme="lotus"],
[data-color="lotus"] {
  --bg-app: #180812;
  --bg-surface: #260d1d;
  --bg-card: #38132b;
  --bg-card-hover: #4a1939;
  --bg-glass: rgba(38, 13, 29, 0.85);
  --bg-glass-border: rgba(236, 72, 153, 0.3);
  --primary-saffron: #ec4899;
  --primary-gold: #f472b6;
  --text-primary: #fdf2f8;
  --text-secondary: #fbcfe8;
  --text-gold: #f472b6;
  --border-subtle: rgba(236, 72, 153, 0.15);
  --border-highlight: rgba(244, 114, 182, 0.35);
  --shadow-gold: 0 4px 20px rgba(236, 72, 153, 0.3);
}

/* Sacred Ganga Celestial Cyan Theme */
[data-theme="ganga"],
[data-color="ganga"] {
  --bg-app: #03171f;
  --bg-surface: #062531;
  --bg-card: #0a3647;
  --bg-card-hover: #0f485e;
  --bg-glass: rgba(6, 37, 49, 0.85);
  --bg-glass-border: rgba(6, 182, 212, 0.3);
  --primary-saffron: #06b6d4;
  --primary-gold: #22d3ee;
  --text-primary: #ecfeff;
  --text-secondary: #a5f3fc;
  --text-gold: #22d3ee;
  --border-subtle: rgba(6, 182, 212, 0.15);
  --border-highlight: rgba(34, 211, 238, 0.35);
  --shadow-gold: 0 4px 20px rgba(6, 182, 212, 0.3);
}

/* Surya Radiant Solar Amber Theme */
[data-theme="surya"],
[data-color="surya"] {
  --bg-app: #1a0c04;
  --bg-surface: #2a1408;
  --bg-card: #3d1e0d;
  --bg-card-hover: #522912;
  --bg-glass: rgba(42, 20, 8, 0.85);
  --bg-glass-border: rgba(234, 88, 12, 0.3);
  --primary-saffron: #ea580c;
  --primary-gold: #fb923c;
  --text-primary: #fff7ed;
  --text-secondary: #ffedd5;
  --text-gold: #fb923c;
  --border-subtle: rgba(234, 88, 12, 0.15);
  --border-highlight: rgba(251, 146, 60, 0.35);
  --shadow-gold: 0 4px 20px rgba(234, 88, 12, 0.3);
}

/* Mystic Rudra Vedic Violet Theme */
[data-theme="rudraksha"],
[data-color="rudraksha"] {
  --bg-app: #12091f;
  --bg-surface: #1d0f33;
  --bg-card: #2b164a;
  --bg-card-hover: #3a1e63;
  --bg-glass: rgba(29, 15, 51, 0.85);
  --bg-glass-border: rgba(139, 92, 246, 0.3);
  --primary-saffron: #8b5cf6;
  --primary-gold: #a78bfa;
  --text-primary: #f5f3ff;
  --text-secondary: #ddd6fe;
  --text-gold: #a78bfa;
  --border-subtle: rgba(139, 92, 246, 0.15);
  --border-highlight: rgba(167, 139, 250, 0.35);
  --shadow-gold: 0 4px 20px rgba(139, 92, 246, 0.3);
}

/* Auspicious Kesar Marigold Gold Theme */
[data-theme="kesar"],
[data-color="kesar"] {
  --bg-app: #161303;
  --bg-surface: #242007;
  --bg-card: #38310c;
  --bg-card-hover: #4c4310;
  --bg-glass: rgba(36, 32, 7, 0.85);
  --bg-glass-border: rgba(234, 179, 8, 0.3);
  --primary-saffron: #eab308;
  --primary-gold: #fde047;
  --text-primary: #fefce8;
  --text-secondary: #fef08a;
  --text-gold: #facc15;
  --border-subtle: rgba(234, 179, 8, 0.15);
  --border-highlight: rgba(253, 224, 71, 0.35);
  --shadow-gold: 0 4px 20px rgba(234, 179, 8, 0.3);
}

/* ==========================================================================
   LIGHT THEME FOUNDATION & COLOR ACCENT PALETTES (data-mode="light")
   ========================================================================== */
[data-mode="light"] {
  --bg-app: #faf5ed;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f5ede0;
  --bg-glass: rgba(255, 255, 255, 0.90);
  --bg-glass-border: rgba(0, 0, 0, 0.12);
  
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-gold: #c2410c;
  
  --border-subtle: rgba(0, 0, 0, 0.09);
  --border-highlight: rgba(230, 81, 0, 0.28);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-gold: 0 4px 16px rgba(230, 81, 0, 0.18);
  --shadow-glow: 0 0 16px rgba(230, 81, 0, 0.2);
}

/* Light Mode + Saffron */
[data-mode="light"][data-color="saffron"],
[data-mode="light"][data-theme="saffron"] {
  --primary-saffron: #e65100;
  --primary-gold: #d97706;
  --text-gold: #c2410c;
  --border-highlight: rgba(230, 81, 0, 0.28);
  --shadow-gold: 0 4px 16px rgba(230, 81, 0, 0.2);
}

/* Light Mode + Peacock */
[data-mode="light"][data-color="peacock"],
[data-mode="light"][data-theme="peacock"] {
  --bg-card-hover: #edfcf6;
  --primary-saffron: #059669;
  --primary-gold: #0284c7;
  --text-gold: #047857;
  --border-highlight: rgba(5, 150, 105, 0.3);
  --shadow-gold: 0 4px 16px rgba(5, 150, 105, 0.2);
}

/* Light Mode + Kumkum */
[data-mode="light"][data-color="kumkum"],
[data-mode="light"][data-theme="kumkum"] {
  --bg-card-hover: #fff1f2;
  --primary-saffron: #e11d48;
  --primary-gold: #d97706;
  --text-gold: #be123c;
  --border-highlight: rgba(225, 29, 72, 0.3);
  --shadow-gold: 0 4px 16px rgba(225, 29, 72, 0.2);
}

/* Light Mode + Gold */
[data-mode="light"][data-color="gold"],
[data-mode="light"][data-theme="gold"] {
  --bg-card-hover: #fffbeb;
  --primary-saffron: #d97706;
  --primary-gold: #b45309;
  --text-gold: #b45309;
  --border-highlight: rgba(217, 119, 6, 0.3);
  --shadow-gold: 0 4px 16px rgba(217, 119, 6, 0.2);
}

/* Light Mode + Shiva */
[data-mode="light"][data-color="shiva"],
[data-mode="light"][data-theme="shiva"] {
  --bg-card-hover: #f0f9ff;
  --primary-saffron: #0284c7;
  --primary-gold: #0369a1;
  --text-gold: #0284c7;
  --border-highlight: rgba(2, 132, 199, 0.3);
  --shadow-gold: 0 4px 16px rgba(2, 132, 199, 0.2);
}

/* Light Mode + Forest */
[data-mode="light"][data-color="forest"],
[data-mode="light"][data-theme="forest"] {
  --bg-card-hover: #f0fdf4;
  --primary-saffron: #15803d;
  --primary-gold: #4d7c0f;
  --text-gold: #15803d;
  --border-highlight: rgba(21, 128, 61, 0.3);
  --shadow-gold: 0 4px 16px rgba(21, 128, 61, 0.2);
}

/* Light Mode + Midnight */
[data-mode="light"][data-color="midnight"],
[data-mode="light"][data-theme="midnight"] {
  --bg-card-hover: #f8fafc;
  --primary-saffron: #4f46e5;
  --primary-gold: #0284c7;
  --text-gold: #4338ca;
  --border-highlight: rgba(79, 70, 229, 0.3);
  --shadow-gold: 0 4px 16px rgba(79, 70, 229, 0.2);
}

/* Light Mode + Lotus */
[data-mode="light"][data-color="lotus"],
[data-mode="light"][data-theme="lotus"] {
  --bg-card-hover: #fdf2f8;
  --primary-saffron: #db2777;
  --primary-gold: #be185d;
  --text-gold: #be185d;
  --border-highlight: rgba(219, 39, 119, 0.3);
  --shadow-gold: 0 4px 16px rgba(219, 39, 119, 0.2);
}

/* Light Mode + Ganga */
[data-mode="light"][data-color="ganga"],
[data-mode="light"][data-theme="ganga"] {
  --bg-card-hover: #ecfeff;
  --primary-saffron: #0891b2;
  --primary-gold: #0e7490;
  --text-gold: #0e7490;
  --border-highlight: rgba(8, 145, 178, 0.3);
  --shadow-gold: 0 4px 16px rgba(8, 145, 178, 0.2);
}

/* Light Mode + Surya */
[data-mode="light"][data-color="surya"],
[data-mode="light"][data-theme="surya"] {
  --bg-card-hover: #fff7ed;
  --primary-saffron: #c2410c;
  --primary-gold: #9a3412;
  --text-gold: #c2410c;
  --border-highlight: rgba(194, 65, 12, 0.3);
  --shadow-gold: 0 4px 16px rgba(194, 65, 12, 0.2);
}

/* Light Mode + Rudraksha */
[data-mode="light"][data-color="rudraksha"],
[data-mode="light"][data-theme="rudraksha"] {
  --bg-card-hover: #f5f3ff;
  --primary-saffron: #7c3aed;
  --primary-gold: #6d28d9;
  --text-gold: #6d28d9;
  --border-highlight: rgba(124, 58, 237, 0.3);
  --shadow-gold: 0 4px 16px rgba(124, 58, 237, 0.2);
}

/* Light Mode + Kesar */
[data-mode="light"][data-color="kesar"],
[data-mode="light"][data-theme="kesar"] {
  --bg-card-hover: #fefce8;
  --primary-saffron: #ca8a04;
  --primary-gold: #a16207;
  --text-gold: #a16207;
  --border-highlight: rgba(202, 138, 4, 0.3);
  --shadow-gold: 0 4px 16px rgba(202, 138, 4, 0.2);
}

/* ==========================================================================
   THEME PRELOADING (Zero-flicker initial page render)
   ========================================================================== */
html.theme-preloading,
html.theme-preloading *,
html.theme-preloading *::before,
html.theme-preloading *::after {
  transition: none !important;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  font-family: var(--font-gujarati);
  background-color: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  user-select: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-highlight);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-gold);
}

/* Animation Keyframes */
@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(255, 179, 0, 0.4);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 24px rgba(255, 179, 0, 0.8);
  }
}

@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}