/**
 * ANHAD Unified Theme Variables
 * 
 * Defines CSS custom properties for all 4 themes using data-theme selectors.
 * No classes, no !important — only [data-theme="..."] attribute selectors.
 * 
 * Tokens available:
 *   --bg-primary        - Main page background
 *   --bg-secondary      - Cards, panels, sidebars
 *   --bg-tertiary       - Inputs, subtle containers
 *   --text-primary      - Headings, body text
 *   --text-secondary    - Muted/secondary text
 *   --text-accent       - Links, highlights
 *   --border-color      - Dividers, outlines
 *   --shadow-color      - Box-shadow base color
 *   --highlight-color   - Search match highlight
 *   --btn-bg            - Primary button background
 *   --btn-text          - Primary button text
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT THEME — White/Gray scale, #1C1C1E text, #FFD60A highlight
   ═══════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #FAF8F5;
    --bg-secondary: #F2F2F7;
    --bg-tertiary: #E5E5EA;
    
    /* Text */
    --text-primary: #1C1C1E;
    --text-secondary: #8E8E93;
    --text-accent: #007AFF;
    
    /* UI Elements */
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.15);
    --highlight-color: #FFD60A;
    --btn-bg: #007AFF;
    --btn-text: #FFFFFF;
    
    /* Card Gradients */
    --card-green-gradient: linear-gradient(140deg, #E8F5E9 0%, #C8E6C9 100%);
    --card-gold-gradient: linear-gradient(140deg, #FFF8E1 0%, #FFECB3 100%);
    --card-purple-gradient: linear-gradient(140deg, #EDE7F6 0%, #D1C4E9 100%);
    --card-blue-gradient: linear-gradient(140deg, #E3F2FD 0%, #BBDEFB 100%);
    --card-rose-gradient: linear-gradient(140deg, #FFEBEE 0%, #FFCDD2 100%);
    --card-event-gradient: linear-gradient(160deg, #FFFCF8 0%, #FFF8EE 25%, #FFF2E0 50%, #FFE8C8 75%, #FFECB3 100%);
    
    /* Event Card Specific */
    --event-title-color: #72500A;
    --event-title-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AUTO MODE — Time of Day Specific Overrides (Dynamic background colors)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Morning Time — Warm Peach/Orange shades (5:00 AM to 9:00 AM) */
[data-theme-mode="auto"][data-time-of-day="morning"] {
    --bg-primary: #FFF5EC;
    --bg-secondary: #FFEBD8;
    --bg-tertiary: #FFE0C4;
    --text-primary: #3E2723;
    --text-secondary: #7D6B58;
    --text-accent: #E8A87C;
    --border-color: rgba(232, 168, 124, 0.2);
}

/* Daytime — Warm Creamy Yellowish shades (9:00 AM to 4:00 PM) */
[data-theme-mode="auto"][data-time-of-day="day"] {
    --bg-primary: #FFFDF9;
    --bg-secondary: #FFF8EE;
    --bg-tertiary: #FFF2DF;
    --text-primary: #1C1C1E;
    --text-secondary: #8E8E93;
    --text-accent: #D4943A;
    --border-color: rgba(212, 148, 58, 0.15);
}

/* Evening / Golden Hour — Warm Amber shades (4:00 PM to 8:00 PM) */
[data-theme-mode="auto"][data-time-of-day="evening"] {
    --bg-primary: #FFF8E7;
    --bg-secondary: #FFF0D4;
    --bg-tertiary: #FFE4B5;
    --text-primary: #3B2A00;
    --text-secondary: #7A6A4F;
    --text-accent: #B8860B;
    --border-color: rgba(184, 134, 11, 0.25);
}

/* Night Time — Dark mode in auto theme (8:00 PM to 5:00 AM) */
[data-theme-mode="auto"][data-time-of-day="night"] {
    --bg-primary: #1C1C1E;
    --bg-secondary: #2C2C2E;
    --bg-tertiary: #3A3A3C;
    --text-primary: #F5F5F7;
    --text-secondary: #8E8E93;
    --text-accent: #0A84FF;
    --border-color: rgba(255, 255, 255, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --highlight-color: #FFD60A;
    --btn-bg: #0A84FF;
    --btn-text: #FFFFFF;
    --card-green-gradient: linear-gradient(140deg, #1C3D2A 0%, #2D4A3E 100%);
    --card-gold-gradient: linear-gradient(140deg, #3D2D1C 0%, #4A3D2A 100%);
    --card-purple-gradient: linear-gradient(140deg, #2D1C3D 0%, #3A2D4A 100%);
    --card-blue-gradient: linear-gradient(140deg, #1C2D3D 0%, #2A3D4A 100%);
    --card-rose-gradient: linear-gradient(140deg, #3D1C2D 0%, #4A2A3D 100%);
    --card-event-gradient: linear-gradient(160deg, #2D2D1C 0%, #3D3D2A 25%, #4A4A2D 50%, #3D3D1C 75%, #2D2D2A 100%);
    --event-title-color: #F5F5F7;
    --event-title-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — #1C1C1E bg, #F5F5F7 text, #FFD60A highlight
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #1C1C1E;
    --bg-secondary: #2C2C2E;
    --bg-tertiary: #3A3A3C;
    
    /* Text */
    --text-primary: #F5F5F7;
    --text-secondary: #8E8E93;
    --text-accent: #0A84FF;
    
    /* UI Elements */
    --border-color: rgba(255, 255, 255, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --highlight-color: #FFD60A;
    --btn-bg: #0A84FF;
    --btn-text: #FFFFFF;
    
    /* Card Gradients - Dark mode versions */
    --card-green-gradient: linear-gradient(140deg, #1C3D2A 0%, #2D4A3E 100%);
    --card-gold-gradient: linear-gradient(140deg, #3D2D1C 0%, #4A3D2A 100%);
    --card-purple-gradient: linear-gradient(140deg, #2D1C3D 0%, #3A2D4A 100%);
    --card-blue-gradient: linear-gradient(140deg, #1C2D3D 0%, #2A3D4A 100%);
    --card-rose-gradient: linear-gradient(140deg, #3D1C2D 0%, #4A2A3D 100%);
    --card-event-gradient: linear-gradient(160deg, #2D2D1C 0%, #3D3D2A 25%, #4A4A2D 50%, #3D3D1C 75%, #2D2D2A 100%);
    
    /* Event Card Specific */
    --event-title-color: #F5F5F7;
    --event-title-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIVINE GOLD THEME — Warm cream #FFF8E7 bg, #3B2A00 text, #D4A017 highlight
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="divineGold"] {
    /* Backgrounds */
    --bg-primary: #FFF8E7;
    --bg-secondary: #FFF5E0;
    --bg-tertiary: #FAEED8;
    
    /* Text */
    --text-primary: #3B2A00;
    --text-secondary: #7A6A4F;
    --text-accent: #B8860B;
    
    /* UI Elements */
    --border-color: rgba(59, 42, 0, 0.15);
    --shadow-color: rgba(59, 42, 0, 0.15);
    --highlight-color: #D4A017;
    --btn-bg: #D4A017;
    --btn-text: #3B2A00;
    
    /* Event Card Specific */
    --event-title-color: #4A3500;
    --event-title-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEPIA THEME — #F4ECD8 bg, #3B2A00 text, #C8860A highlight
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="sepia"] {
    /* Backgrounds */
    --bg-primary: #F4ECD8;
    --bg-secondary: #EDE4CF;
    --bg-tertiary: #E5DBC5;
    
    /* Text */
    --text-primary: #3B2A00;
    --text-secondary: #7A6A4F;
    --text-accent: #8B6914;
    
    /* UI Elements */
    --border-color: rgba(59, 42, 0, 0.12);
    --shadow-color: rgba(59, 42, 0, 0.12);
    --highlight-color: #C8860A;
    --btn-bg: #C8860A;
    --btn-text: #FFFFFF;
    
    /* Event Card Specific */
    --event-title-color: #5D4037;
    --event-title-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEFAULT/FALLBACK (no data-theme set) — Light theme values
   ═══════════════════════════════════════════════════════════════════════════ */
:root:not([data-theme]),
html:not([data-theme]) {
    /* Backgrounds */
    --bg-primary: #FAF8F5;
    --bg-secondary: #F2F2F7;
    --bg-tertiary: #E5E5EA;
    
    /* Text */
    --text-primary: #1C1C1E;
    --text-secondary: #8E8E93;
    --text-accent: #007AFF;
    
    /* UI Elements */
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.15);
    --highlight-color: #FFD60A;
    --btn-bg: #007AFF;
    --btn-text: #FFFFFF;
    
    /* Card Gradients - Default to light theme */
    --card-green-gradient: linear-gradient(140deg, #E8F5E9 0%, #C8E6C9 100%);
    --card-gold-gradient: linear-gradient(140deg, #FFF8E1 0%, #FFECB3 100%);
    --card-purple-gradient: linear-gradient(140deg, #EDE7F6 0%, #D1C4E9 100%);
    --card-blue-gradient: linear-gradient(140deg, #E3F2FD 0%, #BBDEFB 100%);
    --card-rose-gradient: linear-gradient(140deg, #FFEBEE 0%, #FFCDD2 100%);
    --card-event-gradient: linear-gradient(160deg, #FFFCF8 0%, #FFF8EE 25%, #FFF2E0 50%, #FFE8C8 75%, #FFECB3 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE STYLES using CSS variables
   These apply universally regardless of theme
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    color: var(--text-primary);
}

/* Cards and panels */
.card,
.panel,
.glass-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Form inputs */
input,
textarea,
select {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
}

/* Buttons */
.btn-primary,
button.primary {
    background-color: var(--btn-bg);
    color: var(--btn-text);
}

/* Text elements */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

.text-muted,
.text-secondary {
    color: var(--text-secondary);
}

a,
.link {
    color: var(--text-accent);
}

/* Dividers */
hr,
.divider {
    border-color: var(--border-color);
}

/* Highlight/selection */
::selection {
    background-color: var(--highlight-color);
    color: var(--text-primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 4px;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL GURU IMAGE REFINEMENT — Premium Circular Framing
────────────────────────────────────────────────────────────────────────────── */
img[src*="guruimages/"] {
  object-fit: cover !important;
  object-position: center 25% !important; /* Premium face-centric cropping */
  transform: scale(1.4) !important;       /* Increased zoom for maximum impact */
  border-radius: 50% !important;
}

/* Vertical portrait optimization */
img[src*="gurutegbahadursahebji.jpeg"],
img[src*="gurugobindsinghsahebji.jpeg"] {
  object-position: center 20% !important;
}

/* Specific adjustment for Guru Hargobind Saheb Ji (to show swords) */
img[src*="guruhargobindsahebji.jpeg"] {
  transform: scale(1.2) !important;
  object-position: center 20% !important;
}

/* Landscape/wide image optimization */
img[src*="gurugranthsahebji.jpeg"] {
  object-position: center 40% !important;
  transform: scale(1.15) !important;
}

/* Parent container safety: ensure circular clipping */
.greeting__guru-portrait,
.event-card__guru-img-wrapper,
.bani-icon {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}