/* ========================================
   Theme Variables - Apple-Style Dark/Light Mode
   ======================================== */

/* Default theme is dark */
:root {
    --theme: 'dark';

    /* Z-index layers (generic, theme-independent) */
    --z-dropdown: 1000;
    --z-sticky: 2000;
    --z-fixed: 3000;
    --z-modal-backdrop: 4000;
    --z-modal: 5000;
    --z-popup: 10000;
    --z-popup-nested: 10100;
    --z-popup-deep: 10200;
    --z-tooltip: 10300;
    --z-max: 99999;
}

/* ========================================
   DARK MODE (Default)
   ======================================== */
[data-theme="dark"] {
    /* Surfaces */
    --bg-primary: #1E1E1E;
    --bg-secondary: #2D2D2D;
    --bg-tertiary: #3A3A3A;
    --bg-elevated: #252525;

    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: #98989D;
    --text-tertiary: #6E6E73;
    --text-disabled: #4D4D4D;
    --text-inverse: #000000;

    /* Borders */
    --border-default: #3A3A3A;
    --border-subtle: #2D2D2D;
    --border-strong: #4D4D4D;

    /* Interactive States */
    --interactive-hover: rgba(255, 255, 255, 0.08);
    --interactive-active: rgba(255, 255, 255, 0.12);
    --interactive-selected: #1E3A5F;
    --interactive-selected-hover: #2A4A7C;

    /* Brand Colors */
    --blue-primary: #0A84FF;
    --blue-hover: #409CFF;
    --blue-active: #006EDB;
    --blue-subtle: rgba(10, 132, 255, 0.15);

    --red-primary: #FF453A;
    --red-hover: #FF6961;
    --red-active: #D70015;
    --red-subtle: rgba(255, 69, 58, 0.15);

    --green-primary: #32D74B;
    --green-hover: #64D85C;
    --green-active: #30B83A;
    --green-subtle: rgba(50, 215, 75, 0.15);

    --orange-primary: #FF9F0A;
    --orange-hover: #FFB340;
    --orange-active: #FF8800;
    --orange-subtle: rgba(255, 159, 10, 0.15);

    --gray-primary: #636366;
    --gray-hover: #7C7C80;
    --gray-active: #48484A;

    /* Shadows */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.5);

    /* Overlays */
    --overlay-backdrop: rgba(0, 0, 0, 0.6);

    /* Header Gradient */
    --header-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0) 100%);
}

/* ========================================
   NIGHT MODE (iOS-style Pure Black)
   ======================================== */
[data-theme="night"] {
    /* Surfaces - iOS-style pure black */
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --bg-tertiary: #1C1C1E;
    --bg-elevated: #1C1C1E;

    /* Text - Slightly dimmed for OLED comfort */
    --text-primary: #F2F2F7;
    --text-secondary: #98989D;
    --text-tertiary: #6E6E73;
    --text-disabled: #3A3A3C;
    --text-inverse: #000000;

    /* Borders - Subtle on pure black */
    --border-default: #2C2C2E;
    --border-subtle: #1C1C1E;
    --border-strong: #3A3A3C;

    /* Interactive States */
    --interactive-hover: rgba(255, 255, 255, 0.06);
    --interactive-active: rgba(255, 255, 255, 0.1);
    --interactive-selected: #1E3A5F;
    --interactive-selected-hover: #2A4A7C;

    /* Brand Colors - Optimized for pure black */
    --blue-primary: #0A84FF;
    --blue-hover: #409CFF;
    --blue-active: #006EDB;
    --blue-subtle: rgba(10, 132, 255, 0.12);

    --red-primary: #FF453A;
    --red-hover: #FF6961;
    --red-active: #D70015;
    --red-subtle: rgba(255, 69, 58, 0.12);

    --green-primary: #32D74B;
    --green-hover: #64D85C;
    --green-active: #30B83A;
    --green-subtle: rgba(50, 215, 75, 0.12);

    --orange-primary: #FF9F0A;
    --orange-hover: #FFB340;
    --orange-active: #FF8800;
    --orange-subtle: rgba(255, 159, 10, 0.12);

    --gray-primary: #636366;
    --gray-hover: #7C7C80;
    --gray-active: #48484A;

    /* Shadows - Minimal on pure black */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.8);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.9);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 1);

    /* Overlays */
    --overlay-backdrop: rgba(0, 0, 0, 0.7);

    /* Header Gradient */
    --header-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0) 100%);
}

/* ========================================
   LIGHT MODE
   ======================================== */
[data-theme="light"] {
    /* Surfaces - Gray background, white cards */
    --bg-primary: #F0F0F0;
    --bg-secondary: #E8E8E8;
    --bg-tertiary: #DCDCDC;
    --bg-elevated: #FFFFFF;

    /* Text */
    --text-primary: #000000;
    --text-secondary: #6E6E73;
    --text-tertiary: #8E8E93;
    --text-disabled: #C7C7CC;
    --text-inverse: #FFFFFF;

    /* Borders */
    --border-default: #D1D1D6;
    --border-subtle: #E5E5EA;
    --border-strong: #8E8E93;

    /* Interactive States */
    --interactive-hover: rgba(0, 0, 0, 0.05);
    --interactive-active: rgba(0, 0, 0, 0.1);
    --interactive-selected: #E3F2FD;
    --interactive-selected-hover: #BBDEFB;

    /* Brand Colors */
    --blue-primary: #007AFF;
    --blue-hover: #0051D5;
    --blue-active: #004DB8;
    --blue-subtle: rgba(0, 122, 255, 0.1);

    --red-primary: #FF3B30;
    --red-hover: #D32F2F;
    --red-active: #C62828;
    --red-subtle: rgba(255, 59, 48, 0.1);

    --green-primary: #34C759;
    --green-hover: #2DA44E;
    --green-active: #248A3D;
    --green-subtle: rgba(52, 199, 89, 0.1);

    --orange-primary: #FF9500;
    --orange-hover: #E08600;
    --orange-active: #C77700;
    --orange-subtle: rgba(255, 149, 0, 0.1);

    --gray-primary: #8E8E93;
    --gray-hover: #636366;
    --gray-active: #48484A;

    /* Shadows */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.2);

    /* Overlays */
    --overlay-backdrop: rgba(0, 0, 0, 0.4);

    /* Header Gradient - Much lighter for light mode */
    --header-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 70%, rgba(0, 0, 0, 0) 100%);
}

/* ========================================
   BRASIL THEME 🇧🇷
   Vibrant green & golden yellow
   ======================================== */
[data-theme="brasil"] {
    /* Surfaces - Deep forest green with warm undertones */
    --bg-primary: #001A0F;
    --bg-secondary: #003D1F;
    --bg-tertiary: #005428;
    --bg-elevated: #002A17;

    /* Text - Cream and warm tones */
    --text-primary: #FFF8E7;
    --text-secondary: #C4B896;
    --text-tertiary: #8B8463;
    --text-disabled: #4D4D3A;
    --text-inverse: #001A0F;

    /* Borders - Subtle green */
    --border-default: #005428;
    --border-subtle: #003D1F;
    --border-strong: #007A34;

    /* Interactive States - Golden yellow highlights */
    --interactive-hover: rgba(254, 221, 0, 0.12);
    --interactive-active: rgba(254, 221, 0, 0.2);
    --interactive-selected: #3D4F1F;
    --interactive-selected-hover: #5A6F2E;

    /* Brand Colors - Brasil palette */
    --blue-primary: #009CDE;
    --blue-hover: #00B8FF;
    --blue-active: #007AB8;
    --blue-subtle: rgba(0, 156, 222, 0.15);

    --red-primary: #FF3B30;
    --red-hover: #FF6961;
    --red-active: #D70015;
    --red-subtle: rgba(255, 59, 48, 0.15);

    --green-primary: #00A859;
    --green-hover: #00C96B;
    --green-active: #008A47;
    --green-subtle: rgba(0, 168, 89, 0.15);

    --orange-primary: #FEDD00;
    --orange-hover: #FFE640;
    --orange-active: #E0C400;
    --orange-subtle: rgba(254, 221, 0, 0.15);

    --gray-primary: #8B8463;
    --gray-hover: #A49D7A;
    --gray-active: #6B634A;

    /* Shadows */
    --shadow-small: 0 2px 8px rgba(0, 26, 15, 0.4);
    --shadow-medium: 0 4px 16px rgba(0, 26, 15, 0.5);
    --shadow-large: 0 8px 32px rgba(0, 26, 15, 0.6);

    /* Overlays */
    --overlay-backdrop: rgba(0, 26, 15, 0.7);

    /* Header Gradient */
    --header-gradient: linear-gradient(to bottom, rgba(0, 26, 15, 0.5) 0%, rgba(0, 26, 15, 0.5) 70%, rgba(0, 26, 15, 0) 100%);
}

/* ========================================
   MOROCCO THEME 🇲🇦
   Terracotta, Majorelle blue & warm tones
   ======================================== */
[data-theme="morocco"] {
    /* Surfaces - Rich terracotta and warm browns */
    --bg-primary: #1A0F0A;
    --bg-secondary: #2D1810;
    --bg-tertiary: #432415;
    --bg-elevated: #241511;

    /* Text - Warm cream */
    --text-primary: #F5E6D3;
    --text-secondary: #C4A885;
    --text-tertiary: #8B7355;
    --text-disabled: #4D4035;
    --text-inverse: #1A0F0A;

    /* Borders - Terracotta tones */
    --border-default: #5A3825;
    --border-subtle: #432415;
    --border-strong: #7A4F35;

    /* Interactive States - Majorelle blue highlights */
    --interactive-hover: rgba(8, 120, 180, 0.12);
    --interactive-active: rgba(8, 120, 180, 0.2);
    --interactive-selected: #1F3540;
    --interactive-selected-hover: #2E4A5A;

    /* Brand Colors - Morocco palette */
    --blue-primary: #0878B4;
    --blue-hover: #0A9CDE;
    --blue-active: #06598A;
    --blue-subtle: rgba(8, 120, 180, 0.15);

    --red-primary: #D4583B;
    --red-hover: #E87A61;
    --red-active: #B3442E;
    --red-subtle: rgba(212, 88, 59, 0.15);

    --green-primary: #3D9970;
    --green-hover: #5AB38A;
    --green-active: #2E7A57;
    --green-subtle: rgba(61, 153, 112, 0.15);

    --orange-primary: #E67E22;
    --orange-hover: #F39C55;
    --orange-active: #C46419;
    --orange-subtle: rgba(230, 126, 34, 0.15);

    --gray-primary: #8B7355;
    --gray-hover: #A4916F;
    --gray-active: #6B5842;

    /* Shadows */
    --shadow-small: 0 2px 8px rgba(26, 15, 10, 0.4);
    --shadow-medium: 0 4px 16px rgba(26, 15, 10, 0.5);
    --shadow-large: 0 8px 32px rgba(26, 15, 10, 0.6);

    /* Overlays */
    --overlay-backdrop: rgba(26, 15, 10, 0.7);

    /* Header Gradient */
    --header-gradient: linear-gradient(to bottom, rgba(26, 15, 10, 0.5) 0%, rgba(26, 15, 10, 0.5) 70%, rgba(26, 15, 10, 0) 100%);
}

/* ========================================
   IRAN THEME 🇮🇷
   Persian emerald green, rose & turquoise
   ======================================== */
[data-theme="iran"] {
    /* Surfaces - Deep emerald green (from flag) */
    --bg-primary: #0A1A0F;
    --bg-secondary: #0F2917;
    --bg-tertiary: #1A3D24;
    --bg-elevated: #111F15;

    /* Text - Warm cream with rose undertones */
    --text-primary: #F5EDE8;
    --text-secondary: #C4B4A8;
    --text-tertiary: #8B7E73;
    --text-disabled: #4D4540;
    --text-inverse: #0A1A0F;

    /* Borders - Emerald green */
    --border-default: #2D5238;
    --border-subtle: #1A3D24;
    --border-strong: #3E6B4A;

    /* Interactive States - Persian turquoise highlights */
    --interactive-hover: rgba(64, 224, 208, 0.12);
    --interactive-active: rgba(64, 224, 208, 0.2);
    --interactive-selected: #1F3D2A;
    --interactive-selected-hover: #2E5A3E;

    /* Brand Colors - Persian palette */
    --blue-primary: #40E0D0;
    --blue-hover: #70F0E0;
    --blue-active: #2AB8AA;
    --blue-subtle: rgba(64, 224, 208, 0.15);

    --red-primary: #D4516B;
    --red-hover: #E87A8F;
    --red-active: #B33952;
    --red-subtle: rgba(212, 81, 107, 0.15);

    --green-primary: #2D9970;
    --green-hover: #4DB38A;
    --green-active: #227A57;
    --green-subtle: rgba(45, 153, 112, 0.15);

    --orange-primary: #F4A460;
    --orange-hover: #F8C088;
    --orange-active: #D88A4A;
    --orange-subtle: rgba(244, 164, 96, 0.15);

    --gray-primary: #8B7E73;
    --gray-hover: #A49990;
    --gray-active: #6B625A;

    /* Shadows */
    --shadow-small: 0 2px 8px rgba(10, 26, 15, 0.4);
    --shadow-medium: 0 4px 16px rgba(10, 26, 15, 0.5);
    --shadow-large: 0 8px 32px rgba(10, 26, 15, 0.6);

    /* Overlays */
    --overlay-backdrop: rgba(10, 26, 15, 0.7);

    /* Header Gradient */
    --header-gradient: linear-gradient(to bottom, rgba(10, 26, 15, 0.5) 0%, rgba(10, 26, 15, 0.5) 70%, rgba(10, 26, 15, 0) 100%);
}

/* ========================================
   ROMANIA THEME 🇷🇴
   Cobalt blue, golden yellow & crimson red
   ======================================== */
[data-theme="romania"] {
    /* Surfaces - Rich cobalt blue (from flag) */
    --bg-primary: #0D1629;
    --bg-secondary: #162440;
    --bg-tertiary: #1F3357;
    --bg-elevated: #131D33;

    /* Text - Warm golden cream */
    --text-primary: #F8F0DC;
    --text-secondary: #D4C4A0;
    --text-tertiary: #A48F6B;
    --text-disabled: #524838;
    --text-inverse: #0D1629;

    /* Borders - Cobalt */
    --border-default: #2B4470;
    --border-subtle: #1F3357;
    --border-strong: #3D5A8F;

    /* Interactive States - Golden yellow highlights */
    --interactive-hover: rgba(252, 209, 22, 0.1);
    --interactive-active: rgba(252, 209, 22, 0.18);
    --interactive-selected: #3D3320;
    --interactive-selected-hover: #544630;

    /* Brand Colors - Romania palette (blue, yellow, red flag) */
    --blue-primary: #5B9BD5;
    --blue-hover: #7CB3E0;
    --blue-active: #4A8AC4;
    --blue-subtle: rgba(91, 155, 213, 0.15);

    --red-primary: #CE1126;
    --red-hover: #E8384F;
    --red-active: #A00D1D;
    --red-subtle: rgba(206, 17, 38, 0.15);

    --green-primary: #2ECC71;
    --green-hover: #58D68D;
    --green-active: #27A25A;
    --green-subtle: rgba(46, 204, 113, 0.15);

    --orange-primary: #FCD116;
    --orange-hover: #FFDE52;
    --orange-active: #D4AD12;
    --orange-subtle: rgba(252, 209, 22, 0.15);

    --gray-primary: #A48F6B;
    --gray-hover: #BAAB88;
    --gray-active: #847052;

    /* Shadows */
    --shadow-small: 0 2px 8px rgba(13, 22, 41, 0.5);
    --shadow-medium: 0 4px 16px rgba(13, 22, 41, 0.6);
    --shadow-large: 0 8px 32px rgba(13, 22, 41, 0.7);

    /* Overlays */
    --overlay-backdrop: rgba(13, 22, 41, 0.75);

    /* Header Gradient */
    --header-gradient: linear-gradient(to bottom, rgba(13, 22, 41, 0.5) 0%, rgba(13, 22, 41, 0.5) 70%, rgba(13, 22, 41, 0) 100%);
}

/* ========================================
   Smooth Transitions
   ======================================== */
* {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Disable transitions on theme change to avoid flicker */
body.theme-transitioning * {
    transition: none !important;
}