/* ============================================
   COLORS.CSS
   Barcha theme variables shu yerda.
   Style.css faqat shu o'zgaruvchilardan foydalanadi.
   ============================================
   Tuzilishi:
   - 4 ta rang temasi: Classic, Ocean, Sunset, Forest
   - Har biri light va dark variantga ega
   - HTML ga ikkita atribut qo'yiladi:
       data-theme="classic|ocean|sunset|forest"
       data-mode="light|dark"
   ============================================ */


/* ====================================================================
   1. CLASSIC — LIGHT (default — sizning hozirgi rangingiz)
   ==================================================================== */
:root,
[data-theme="classic"][data-mode="light"],
[data-theme="classic"]:not([data-mode="dark"]) {
    /* Primary ranglar */
    --primary-blue: #0066ff;
    --primary-blue-light: #1c96fa;
    --primary-blue-hover: #1878e8;
    --primary-blue-secondary: #4a90e2;
    --primary-blue-bg: #87c9ff;
    --primary-blue-bg-light: #a8d8ff;
    --primary-blue-bg-lighter: #BBDEFB;
    --primary-blue-text: #007BFF;
    --gold: #f59e0b;

    /* Background ranglar */
    --bg-header: #0066ff;
    --bg-mail-ozim: #BBDEFB;
    --bg-mail-boshqa: white;
    --bg-btn: #eee;
    --bg-cit: #eee;
    --bg-music: #87c9ff;
    --bg-music-progress: #eee;
    --bg-login-reg: #d5e6ff;
    --dark-light-ikon: #025ae0;
    --color-header: white;
    --color-box-head: white;
    --bg-header-badge: #E23030;
    --color-header-badge: #fff;
    --bg-body: beige;
    --bg-primary: white;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f1f1;
    --bg-light-gray: #eeeeee;
    --bg-input: #eeeeee;
    --bg-blue-400: #64a5fa;
    --bg-gradient-blue: linear-gradient(180deg, #BBDEFB, #1c96fa);
    --bg-gradient-orange: linear-gradient(180deg, #FFAB91, #D84315);
    --bg-gradient-light: linear-gradient(180deg, #e4f2fd, #87c9ff);

    /* Text ranglar */
    --text-textarea: #333;
    --color-btn: gray;
    --color-cit: gray;
    --text-mail-time: gray;
    --text-primary: #1E293B;
    --text-secondary: #64748b;
    --text-muted: gray;
    --text-light-gray: #777;
    --text-slate: slategray;
    --text-dark-gray: #4d5e7a;
    --text-white: white;

    /* Border ranglar */
    --border-light: #dcdcdc;
    --border-gray: #eeeeee;
    --border-medium: #ddd;
    --border-dark: #cecece;
    --border-light-gray: #d9d8d8;
    --border-blue: #1c96fa;

    /* Status/Alert ranglar */
    --success-bg: #63e696;
    --success-light: #0CBC87;
    --success-bg-light: #E6F8F3;
    --success-border: #93fddd;
    --error-bg: rgb(255, 183, 0);
    --error-light: #D6293E;
    --warning-bg: #ffd3d3;
    --warning-text: #ec4141;

    /* Online/Offline ranglar */
    --online-color: #ffc048;
    --online-border: orange;
    --offline-color: #e0e0e0;

    /* Shadow */
    --shadow-light: 0px 4px 5px rgb(0, 0, 0, 0.3);
    --shadow-medium: 0 0 15px rgba(0, 0, 0, 0.1);
    --shadow-small: 0 2px 2px rgb(0, 0, 0, 0.1);
    --shadow-blue: 0 -2px 10px rgba(0, 0, 0, 0.1);
}


/* ====================================================================
   1b. CLASSIC — DARK
   ==================================================================== */
[data-theme="classic"][data-mode="dark"] {
    /* Primary ranglar */
    --primary-blue: #60a5fa;
    --primary-blue-light: #b3cffd;
    --primary-blue-hover: #2563eb;
    --primary-blue-secondary: #60a5fa;
    --primary-blue-bg: #1e3a8a;
    --primary-blue-bg-light: #1e40af;
    --primary-blue-bg-lighter: #1d4ed8;
    --primary-blue-text: #60a5fa;
    --gold: #f59e0b;

    /* Background ranglar */
    --bg-header: #2D3748;
    --bg-mail-ozim: #2787F5;
    --bg-mail-boshqa: #1e293d;
    --bg-btn: #475569;
    --bg-cit: #475569;
    --bg-music: #94a3b8;
    --bg-music-progress: #94a3b8;
    --bg-login-reg: #374151;
    --dark-light-ikon: #475569;
    --color-header: #4C79F6;
    --color-box-head: #94a3b8;
    --bg-header-badge: #E23030;
    --color-header-badge: white;
    --bg-body: #0f172a;
    --bg-primary: #1e293b;
    --bg-secondary: #334155;
    --bg-tertiary: #475569;
    --bg-light-gray: #374151;
    --bg-input: #374151;
    --bg-blue-400: #64a5fa;
    --bg-gradient-blue: linear-gradient(180deg, #1d4ed8, #3b82f6);
    --bg-gradient-orange: linear-gradient(180deg, #ea580c, #dc2626);
    --bg-gradient-light: linear-gradient(180deg, #4d5560, #334155);

    /* Text ranglar */
    --text-textarea: white;
    --color-btn: #94a3b8;
    --color-cit: #dcdcdc;
    --text-mail-time: #dcdcdc;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-light-gray: #9ca3af;
    --text-slate: #cbd5e1;
    --text-dark-gray: #d1d5db;
    --text-white: #eff0f1;

    /* Border ranglar */
    --border-light: #374151;
    --border-gray: #374151;
    --border-medium: #4b5563;
    --border-dark: #6b7280;
    --border-light-gray: #4b5563;
    --border-blue: #3b82f6;

    /* Status/Alert ranglar */
    --success-bg: #059669;
    --success-light: #10b981;
    --success-bg-light: #064e3b;
    --success-border: #047857;
    --error-bg: #dc2626;
    --error-light: #ef4444;
    --warning-bg: #7c2d12;
    --warning-text: #f87171;

    /* Online/Offline ranglar */
    --online-color: #fbbf24;
    --online-border: #f59e0b;
    --offline-color: #6b7280;

    /* Shadow */
    --shadow-light: 0px 4px 5px rgb(0, 0, 0, 0.5);
    --shadow-medium: 0 0 15px rgba(0, 0, 0, 0.3);
    --shadow-small: 0 2px 2px rgb(0, 0, 0, 0.2);
    --shadow-blue: 0 -2px 10px rgba(0, 0, 0, 0.3);
}


/* ====================================================================
   2. OCEAN — LIGHT
   ==================================================================== */
[data-theme="ocean"][data-mode="light"],
[data-theme="ocean"]:not([data-mode="dark"]) {
    /* Primary ranglar */
    --primary-blue: #0ea5e9;
    --primary-blue-light: #38bdf8;
    --primary-blue-hover: #0284c7;
    --primary-blue-secondary: #0369a1;
    --primary-blue-bg: #7dd3fc;
    --primary-blue-bg-light: #bae6fd;
    --primary-blue-bg-lighter: #e0f2fe;
    --primary-blue-text: #0369a1;
    --gold: #f59e0b;

    /* Background ranglar */
    --bg-header: #0c4a6e;
    --bg-mail-ozim: #bae6fd;
    --bg-mail-boshqa: white;
    --bg-btn: #e0f2fe;
    --bg-cit: #e0f2fe;
    --bg-music: #7dd3fc;
    --bg-music-progress: #e0f2fe;
    --bg-login-reg: #e0f2fe;
    --dark-light-ikon: #075985;
    --color-header: #f0f9ff;
    --color-box-head: #f0f9ff;
    --bg-header-badge: #E23030;
    --color-header-badge: #fff;
    --bg-body: #f0f9ff;
    --bg-primary: white;
    --bg-secondary: #f0f9ff;
    --bg-tertiary: #e0f2fe;
    --bg-light-gray: #e0f2fe;
    --bg-input: #f0f9ff;
    --bg-blue-400: #38bdf8;
    --bg-gradient-blue: linear-gradient(180deg, #bae6fd, #0ea5e9);
    --bg-gradient-orange: linear-gradient(180deg, #FFAB91, #D84315);
    --bg-gradient-light: linear-gradient(180deg, #f0f9ff, #7dd3fc);

    /* Text ranglar */
    --text-textarea: #0c4a6e;
    --color-btn: #64748b;
    --color-cit: #64748b;
    --text-mail-time: #64748b;
    --text-primary: #0c4a6e;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-light-gray: #94a3b8;
    --text-slate: #475569;
    --text-dark-gray: #334155;
    --text-white: white;

    /* Border ranglar */
    --border-light: #bae6fd;
    --border-gray: #e0f2fe;
    --border-medium: #bae6fd;
    --border-dark: #7dd3fc;
    --border-light-gray: #bae6fd;
    --border-blue: #0ea5e9;

    /* Status/Alert ranglar */
    --success-bg: #63e696;
    --success-light: #0CBC87;
    --success-bg-light: #E6F8F3;
    --success-border: #93fddd;
    --error-bg: rgb(255, 183, 0);
    --error-light: #D6293E;
    --warning-bg: #ffd3d3;
    --warning-text: #ec4141;

    /* Online/Offline ranglar */
    --online-color: #ffc048;
    --online-border: orange;
    --offline-color: #e0e0e0;

    /* Shadow */
    --shadow-light: 0px 4px 5px rgb(0, 0, 0, 0.15);
    --shadow-medium: 0 0 15px rgba(14, 165, 233, 0.1);
    --shadow-small: 0 2px 2px rgb(0, 0, 0, 0.05);
    --shadow-blue: 0 -2px 10px rgba(14, 165, 233, 0.1);
}


/* ====================================================================
   2b. OCEAN — DARK
   ==================================================================== */
[data-theme="ocean"][data-mode="dark"] {
    /* Primary ranglar */
    --primary-blue: #38bdf8;
    --primary-blue-light: #7dd3fc;
    --primary-blue-hover: #0ea5e9;
    --primary-blue-secondary: #0ea5e9;
    --primary-blue-bg: #075985;
    --primary-blue-bg-light: #0c4a6e;
    --primary-blue-bg-lighter: #0c2d4a;
    --primary-blue-text: #7dd3fc;
    --gold: #f59e0b;

    /* Background ranglar */
    --bg-header: #0c2d4a;
    --bg-mail-ozim: #075985;
    --bg-mail-boshqa: #1e293b;
    --bg-btn: #1e3a5f;
    --bg-cit: #1e3a5f;
    --bg-music: #0369a1;
    --bg-music-progress: #1e3a5f;
    --bg-login-reg: #1e3a5f;
    --dark-light-ikon: #38bdf8;
    --color-header: #bae6fd;
    --color-box-head: #bae6fd;
    --bg-header-badge: #E23030;
    --color-header-badge: white;
    --bg-body: #0f172a;
    --bg-primary: #1e293b;
    --bg-secondary: #1e3a5f;
    --bg-tertiary: #1e3a5f;
    --bg-light-gray: #1e3a5f;
    --bg-input: #1e3a5f;
    --bg-blue-400: #38bdf8;
    --bg-gradient-blue: linear-gradient(180deg, #0c4a6e, #0ea5e9);
    --bg-gradient-orange: linear-gradient(180deg, #ea580c, #dc2626);
    --bg-gradient-light: linear-gradient(180deg, #1e3a5f, #075985);

    /* Text ranglar */
    --text-textarea: #e0f2fe;
    --color-btn: #94a3b8;
    --color-cit: #cbd5e1;
    --text-mail-time: #94a3b8;
    --text-primary: #f0f9ff;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-light-gray: #94a3b8;
    --text-slate: #cbd5e1;
    --text-dark-gray: #cbd5e1;
    --text-white: white;

    /* Border ranglar */
    --border-light: #1e3a5f;
    --border-gray: #1e3a5f;
    --border-medium: #334155;
    --border-dark: #475569;
    --border-light-gray: #334155;
    --border-blue: #0ea5e9;

    /* Status/Alert ranglar */
    --success-bg: #059669;
    --success-light: #10b981;
    --success-bg-light: #064e3b;
    --success-border: #047857;
    --error-bg: #dc2626;
    --error-light: #ef4444;
    --warning-bg: #7c2d12;
    --warning-text: #f87171;

    /* Online/Offline ranglar */
    --online-color: #fbbf24;
    --online-border: #f59e0b;
    --offline-color: #475569;

    /* Shadow */
    --shadow-light: 0px 4px 5px rgb(0, 0, 0, 0.5);
    --shadow-medium: 0 0 15px rgba(0, 0, 0, 0.3);
    --shadow-small: 0 2px 2px rgb(0, 0, 0, 0.2);
    --shadow-blue: 0 -2px 10px rgba(0, 0, 0, 0.3);
}


/* ====================================================================
   3. SUNSET — LIGHT
   ==================================================================== */
[data-theme="sunset"][data-mode="light"],
[data-theme="sunset"]:not([data-mode="dark"]) {
    /* Primary ranglar */
    --primary-blue: #f97316;
    --primary-blue-light: #fb923c;
    --primary-blue-hover: #ea580c;
    --primary-blue-secondary: #c2410c;
    --primary-blue-bg: #fdba74;
    --primary-blue-bg-light: #fed7aa;
    --primary-blue-bg-lighter: #ffedd5;
    --primary-blue-text: #c2410c;
    --gold: #f59e0b;

    /* Background ranglar */
    --bg-header: #c2410c;
    --bg-mail-ozim: #fed7aa;
    --bg-mail-boshqa: white;
    --bg-btn: #ffedd5;
    --bg-cit: #ffedd5;
    --bg-music: #fdba74;
    --bg-music-progress: #ffedd5;
    --bg-login-reg: #ffedd5;
    --dark-light-ikon: #9a3412;
    --color-header: #fff7ed;
    --color-box-head: #fff7ed;
    --bg-header-badge: #E23030;
    --color-header-badge: #fff;
    --bg-body: #fff7ed;
    --bg-primary: white;
    --bg-secondary: #fff7ed;
    --bg-tertiary: #ffedd5;
    --bg-light-gray: #ffedd5;
    --bg-input: #fff7ed;
    --bg-blue-400: #fb923c;
    --bg-gradient-blue: linear-gradient(180deg, #fed7aa, #f97316);
    --bg-gradient-orange: linear-gradient(180deg, #FFAB91, #D84315);
    --bg-gradient-light: linear-gradient(180deg, #fff7ed, #fdba74);

    /* Text ranglar */
    --text-textarea: #7c2d12;
    --color-btn: #92400e;
    --color-cit: #92400e;
    --text-mail-time: #92400e;
    --text-primary: #7c2d12;
    --text-secondary: #9a3412;
    --text-muted: #a16207;
    --text-light-gray: #b45309;
    --text-slate: #92400e;
    --text-dark-gray: #78350f;
    --text-white: white;

    /* Border ranglar */
    --border-light: #fed7aa;
    --border-gray: #ffedd5;
    --border-medium: #fed7aa;
    --border-dark: #fdba74;
    --border-light-gray: #fed7aa;
    --border-blue: #f97316;

    /* Status/Alert ranglar */
    --success-bg: #63e696;
    --success-light: #0CBC87;
    --success-bg-light: #E6F8F3;
    --success-border: #93fddd;
    --error-bg: rgb(255, 183, 0);
    --error-light: #D6293E;
    --warning-bg: #ffd3d3;
    --warning-text: #ec4141;

    /* Online/Offline ranglar */
    --online-color: #ffc048;
    --online-border: orange;
    --offline-color: #e0e0e0;

    /* Shadow */
    --shadow-light: 0px 4px 5px rgb(0, 0, 0, 0.15);
    --shadow-medium: 0 0 15px rgba(249, 115, 22, 0.1);
    --shadow-small: 0 2px 2px rgb(0, 0, 0, 0.05);
    --shadow-blue: 0 -2px 10px rgba(249, 115, 22, 0.1);
}


/* ====================================================================
   3b. SUNSET — DARK
   ==================================================================== */
[data-theme="sunset"][data-mode="dark"] {
    /* Primary ranglar */
    --primary-blue: #fb923c;
    --primary-blue-light: #fdba74;
    --primary-blue-hover: #f97316;
    --primary-blue-secondary: #f97316;
    --primary-blue-bg: #9a3412;
    --primary-blue-bg-light: #7c2d12;
    --primary-blue-bg-lighter: #4a1d09;
    --primary-blue-text: #fdba74;
    --gold: #f59e0b;

    /* Background ranglar */
    --bg-header: #4a1d09;
    --bg-mail-ozim: #9a3412;
    --bg-mail-boshqa: #2a1f18;
    --bg-btn: #44291a;
    --bg-cit: #44291a;
    --bg-music: #c2410c;
    --bg-music-progress: #44291a;
    --bg-login-reg: #44291a;
    --dark-light-ikon: #fb923c;
    --color-header: #fed7aa;
    --color-box-head: #fed7aa;
    --bg-header-badge: #E23030;
    --color-header-badge: white;
    --bg-body: #1c1410;
    --bg-primary: #2a1f18;
    --bg-secondary: #44291a;
    --bg-tertiary: #44291a;
    --bg-light-gray: #44291a;
    --bg-input: #44291a;
    --bg-blue-400: #fb923c;
    --bg-gradient-blue: linear-gradient(180deg, #7c2d12, #f97316);
    --bg-gradient-orange: linear-gradient(180deg, #ea580c, #dc2626);
    --bg-gradient-light: linear-gradient(180deg, #44291a, #9a3412);

    /* Text ranglar */
    --text-textarea: #ffedd5;
    --color-btn: #d4a37a;
    --color-cit: #fed7aa;
    --text-mail-time: #d4a37a;
    --text-primary: #fde4cf;
    --text-secondary: #fed7aa;
    --text-muted: #d4a37a;
    --text-light-gray: #d4a37a;
    --text-slate: #fed7aa;
    --text-dark-gray: #fed7aa;
    --text-white: white;

    /* Border ranglar */
    --border-light: #44291a;
    --border-gray: #44291a;
    --border-medium: #5c3520;
    --border-dark: #7c2d12;
    --border-light-gray: #5c3520;
    --border-blue: #f97316;

    /* Status/Alert ranglar */
    --success-bg: #059669;
    --success-light: #10b981;
    --success-bg-light: #064e3b;
    --success-border: #047857;
    --error-bg: #dc2626;
    --error-light: #ef4444;
    --warning-bg: #7c2d12;
    --warning-text: #f87171;

    /* Online/Offline ranglar */
    --online-color: #fbbf24;
    --online-border: #f59e0b;
    --offline-color: #5c3520;

    /* Shadow */
    --shadow-light: 0px 4px 5px rgb(0, 0, 0, 0.5);
    --shadow-medium: 0 0 15px rgba(0, 0, 0, 0.3);
    --shadow-small: 0 2px 2px rgb(0, 0, 0, 0.2);
    --shadow-blue: 0 -2px 10px rgba(0, 0, 0, 0.3);
}


/* ====================================================================
   4. FOREST — LIGHT
   ==================================================================== */
[data-theme="forest"][data-mode="light"],
[data-theme="forest"]:not([data-mode="dark"]) {
    /* Primary ranglar */
    --primary-blue: #22c55e;
    --primary-blue-light: #4ade80;
    --primary-blue-hover: #16a34a;
    --primary-blue-secondary: #166534;
    --primary-blue-bg: #86efac;
    --primary-blue-bg-light: #bbf7d0;
    --primary-blue-bg-lighter: #dcfce7;
    --primary-blue-text: #166534;
    --gold: #f59e0b;

    /* Background ranglar */
    --bg-header: #166534;
    --bg-mail-ozim: #bbf7d0;
    --bg-mail-boshqa: white;
    --bg-btn: #dcfce7;
    --bg-cit: #dcfce7;
    --bg-music: #86efac;
    --bg-music-progress: #dcfce7;
    --bg-login-reg: #dcfce7;
    --dark-light-ikon: #14532d;
    --color-header: #f0fdf4;
    --color-box-head: #f0fdf4;
    --bg-header-badge: #E23030;
    --color-header-badge: #fff;
    --bg-body: #f0fdf4;
    --bg-primary: white;
    --bg-secondary: #f0fdf4;
    --bg-tertiary: #dcfce7;
    --bg-light-gray: #dcfce7;
    --bg-input: #f0fdf4;
    --bg-blue-400: #4ade80;
    --bg-gradient-blue: linear-gradient(180deg, #bbf7d0, #22c55e);
    --bg-gradient-orange: linear-gradient(180deg, #FFAB91, #D84315);
    --bg-gradient-light: linear-gradient(180deg, #f0fdf4, #86efac);

    /* Text ranglar */
    --text-textarea: #14532d;
    --color-btn: #15803d;
    --color-cit: #15803d;
    --text-mail-time: #15803d;
    --text-primary: #14532d;
    --text-secondary: #166534;
    --text-muted: #15803d;
    --text-light-gray: #16a34a;
    --text-slate: #166534;
    --text-dark-gray: #14532d;
    --text-white: white;

    /* Border ranglar */
    --border-light: #bbf7d0;
    --border-gray: #dcfce7;
    --border-medium: #bbf7d0;
    --border-dark: #86efac;
    --border-light-gray: #bbf7d0;
    --border-blue: #22c55e;

    /* Status/Alert ranglar */
    --success-bg: #63e696;
    --success-light: #0CBC87;
    --success-bg-light: #E6F8F3;
    --success-border: #93fddd;
    --error-bg: rgb(255, 183, 0);
    --error-light: #D6293E;
    --warning-bg: #ffd3d3;
    --warning-text: #ec4141;

    /* Online/Offline ranglar */
    --online-color: #ffc048;
    --online-border: orange;
    --offline-color: #e0e0e0;

    /* Shadow */
    --shadow-light: 0px 4px 5px rgb(0, 0, 0, 0.15);
    --shadow-medium: 0 0 15px rgba(34, 197, 94, 0.1);
    --shadow-small: 0 2px 2px rgb(0, 0, 0, 0.05);
    --shadow-blue: 0 -2px 10px rgba(34, 197, 94, 0.1);
}


/* ====================================================================
   4b. FOREST — DARK
   ==================================================================== */
[data-theme="forest"][data-mode="dark"] {
    /* Primary ranglar */
    --primary-blue: #4ade80;
    --primary-blue-light: #86efac;
    --primary-blue-hover: #22c55e;
    --primary-blue-secondary: #22c55e;
    --primary-blue-bg: #15803d;
    --primary-blue-bg-light: #166534;
    --primary-blue-bg-lighter: #14301c;
    --primary-blue-text: #86efac;
    --gold: #f59e0b;

    /* Background ranglar */
    --bg-header: #14301c;
    --bg-mail-ozim: #15803d;
    --bg-mail-boshqa: #1a2e21;
    --bg-btn: #2a4434;
    --bg-cit: #2a4434;
    --bg-music: #166534;
    --bg-music-progress: #2a4434;
    --bg-login-reg: #2a4434;
    --dark-light-ikon: #4ade80;
    --color-header: #bbf7d0;
    --color-box-head: #bbf7d0;
    --bg-header-badge: #E23030;
    --color-header-badge: white;
    --bg-body: #0d1f14;
    --bg-primary: #1a2e21;
    --bg-secondary: #2a4434;
    --bg-tertiary: #2a4434;
    --bg-light-gray: #2a4434;
    --bg-input: #2a4434;
    --bg-blue-400: #4ade80;
    --bg-gradient-blue: linear-gradient(180deg, #166534, #22c55e);
    --bg-gradient-orange: linear-gradient(180deg, #ea580c, #dc2626);
    --bg-gradient-light: linear-gradient(180deg, #2a4434, #15803d);

    /* Text ranglar */
    --text-textarea: #dcfce7;
    --color-btn: #86efac;
    --color-cit: #bbf7d0;
    --text-mail-time: #86efac;
    --text-primary: #dcfce7;
    --text-secondary: #bbf7d0;
    --text-muted: #86efac;
    --text-light-gray: #86efac;
    --text-slate: #bbf7d0;
    --text-dark-gray: #bbf7d0;
    --text-white: white;

    /* Border ranglar */
    --border-light: #2a4434;
    --border-gray: #2a4434;
    --border-medium: #3a5945;
    --border-dark: #166534;
    --border-light-gray: #3a5945;
    --border-blue: #22c55e;

    /* Status/Alert ranglar */
    --success-bg: #059669;
    --success-light: #10b981;
    --success-bg-light: #064e3b;
    --success-border: #047857;
    --error-bg: #dc2626;
    --error-light: #ef4444;
    --warning-bg: #7c2d12;
    --warning-text: #f87171;

    /* Online/Offline ranglar */
    --online-color: #fbbf24;
    --online-border: #f59e0b;
    --offline-color: #3a5945;

    /* Shadow */
    --shadow-light: 0px 4px 5px rgb(0, 0, 0, 0.5);
    --shadow-medium: 0 0 15px rgba(0, 0, 0, 0.3);
    --shadow-small: 0 2px 2px rgb(0, 0, 0, 0.2);
    --shadow-blue: 0 -2px 10px rgba(0, 0, 0, 0.3);
}


/* ====================================================================
   AUTO MODE (OS prefers-color-scheme: dark)
   Foydalanuvchi data-mode="auto" qo'ysa, OS rejimi bo'yicha ishlaydi.
   ==================================================================== */
@media (prefers-color-scheme: dark) {
    [data-mode="auto"][data-theme="classic"],
    [data-mode="auto"]:not([data-theme]) {
        /* Classic dark variables qaytariladi */
        --primary-blue: #60a5fa;
        --primary-blue-light: #b3cffd;
        --primary-blue-hover: #2563eb;
        --primary-blue-secondary: #60a5fa;
        --primary-blue-bg: #1e3a8a;
        --primary-blue-bg-light: #1e40af;
        --primary-blue-bg-lighter: #1d4ed8;
        --primary-blue-text: #60a5fa;

        --bg-header: #2D3748;
        --bg-mail-ozim: #2787F5;
        --bg-mail-boshqa: #1e293d;
        --bg-btn: #475569;
        --bg-cit: #475569;
        --bg-music: #94a3b8;
        --bg-music-progress: #94a3b8;
        --bg-login-reg: #374151;
        --dark-light-ikon: #475569;
        --color-header: #4C79F6;
        --color-box-head: #94a3b8;
        --color-header-badge: white;
        --bg-body: #0f172a;
        --bg-primary: #1e293b;
        --bg-secondary: #334155;
        --bg-tertiary: #475569;
        --bg-light-gray: #374151;
        --bg-input: #374151;

        --text-textarea: white;
        --color-btn: #94a3b8;
        --color-cit: #dcdcdc;
        --text-mail-time: #dcdcdc;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --text-light-gray: #9ca3af;
        --text-slate: #cbd5e1;
        --text-dark-gray: #d1d5db;
        --text-white: #eff0f1;

        --border-light: #374151;
        --border-gray: #374151;
        --border-medium: #4b5563;
        --border-dark: #6b7280;
        --border-light-gray: #4b5563;
        --border-blue: #3b82f6;

        --success-bg: #059669;
        --success-light: #10b981;
        --success-bg-light: #064e3b;
        --success-border: #047857;
        --error-bg: #dc2626;
        --error-light: #ef4444;
        --warning-bg: #7c2d12;
        --warning-text: #f87171;

        --online-color: #fbbf24;
        --online-border: #f59e0b;
        --offline-color: #6b7280;
    }

    [data-mode="auto"][data-theme="ocean"] {
        --primary-blue: #38bdf8;
        --primary-blue-light: #7dd3fc;
        --primary-blue-hover: #0ea5e9;
        --primary-blue-secondary: #0ea5e9;
        --primary-blue-bg: #075985;
        --primary-blue-bg-light: #0c4a6e;
        --primary-blue-bg-lighter: #0c2d4a;
        --primary-blue-text: #7dd3fc;
        --bg-header: #0c2d4a;
        --bg-mail-ozim: #075985;
        --bg-mail-boshqa: #1e293b;
        --bg-btn: #1e3a5f;
        --bg-cit: #1e3a5f;
        --bg-body: #0f172a;
        --bg-primary: #1e293b;
        --bg-secondary: #1e3a5f;
        --bg-tertiary: #1e3a5f;
        --bg-light-gray: #1e3a5f;
        --bg-input: #1e3a5f;
        --color-header: #bae6fd;
        --color-box-head: #bae6fd;
        --text-primary: #f0f9ff;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
    }

    [data-mode="auto"][data-theme="sunset"] {
        --primary-blue: #fb923c;
        --primary-blue-light: #fdba74;
        --primary-blue-hover: #f97316;
        --primary-blue-secondary: #f97316;
        --primary-blue-bg: #9a3412;
        --primary-blue-bg-light: #7c2d12;
        --primary-blue-bg-lighter: #4a1d09;
        --primary-blue-text: #fdba74;
        --bg-header: #4a1d09;
        --bg-mail-ozim: #9a3412;
        --bg-mail-boshqa: #2a1f18;
        --bg-btn: #44291a;
        --bg-cit: #44291a;
        --bg-body: #1c1410;
        --bg-primary: #2a1f18;
        --bg-secondary: #44291a;
        --bg-tertiary: #44291a;
        --bg-light-gray: #44291a;
        --bg-input: #44291a;
        --color-header: #fed7aa;
        --color-box-head: #fed7aa;
        --text-primary: #fde4cf;
        --text-secondary: #fed7aa;
        --text-muted: #d4a37a;
    }

    [data-mode="auto"][data-theme="forest"] {
        --primary-blue: #4ade80;
        --primary-blue-light: #86efac;
        --primary-blue-hover: #22c55e;
        --primary-blue-secondary: #22c55e;
        --primary-blue-bg: #15803d;
        --primary-blue-bg-light: #166534;
        --primary-blue-bg-lighter: #14301c;
        --primary-blue-text: #86efac;
        --bg-header: #14301c;
        --bg-mail-ozim: #15803d;
        --bg-mail-boshqa: #1a2e21;
        --bg-btn: #2a4434;
        --bg-cit: #2a4434;
        --bg-body: #0d1f14;
        --bg-primary: #1a2e21;
        --bg-secondary: #2a4434;
        --bg-tertiary: #2a4434;
        --bg-light-gray: #2a4434;
        --bg-input: #2a4434;
        --color-header: #bbf7d0;
        --color-box-head: #bbf7d0;
        --text-primary: #dcfce7;
        --text-secondary: #bbf7d0;
        --text-muted: #86efac;
    }
}


/* ====================================================================
   SMOOTH TRANSITION (theme almashganda yumshoq o'tish)
   ==================================================================== */
*,
*::before,
*::after {
    transition: background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}