/* ============================================================================================================*/
/*============================================== THEME SYSTEM ================================================*/
/* ============================================================================================================*/

:root {
    /* === BACKGROUND IMAGE === */
    --bg-image: url("images/backgroundorange.png");
    
    /* === BACKGROUND COLORS === */
    --bg-primary: #1a1410;
    --bg-secondary: rgba(26, 20, 16, 0.95);
    --bg-card: rgba(26, 20, 16, 0.25);
    --bg-card-hover: rgba(218, 145, 70, 0.15);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-gradient-start: rgba(26, 20, 16, 0.6);
    --bg-gradient-mid: rgba(40, 30, 20, 0.6);
    --bg-gradient-end: rgba(26, 20, 16, 0.6);
    
    /* === PRIMARY BRAND COLORS === */
    --color-primary: #da9146;
    --color-primary-dark: #b8722f;
    --color-primary-light: #f0a855;
    --color-primary-rgb: 218, 145, 70;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    /* === TEXT COLORS === */ 
    --text-primary: #ffffff;
    --text-secondary: #e5e5e5;
    --text-muted: #b0b0b0;
    --text-dark: #707070;
    --text-darker: #404040;
    --text-accent: var(--color-primary);
    
    /* === BORDER COLORS === */
    --border-subtle: rgba(218, 145, 70, 0.15);
    --border-normal: rgba(218, 145, 70, 0.3);
    --border-strong: rgba(218, 145, 70, 0.5);
    --border-accent: var(--color-primary);
    
    /* === SHADOW COLORS === */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 30px rgba(218, 145, 70, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(218, 145, 70, 0.5);
    
    /* === GLASSMORPHISM === */
    --glass-opacity: 0.05;
    --glass-blur: 18px;
    --glass-saturation: 150%;
    --glass-brightness: 1.08;
    
    /* === BUTTON COLORS === */
    --btn-primary-bg: linear-gradient(135deg, #da9146 0%, #f0a855 50%, #b8722f 100%);
    --btn-primary-text: #000000;
    --btn-secondary-bg: rgba(255, 255, 255, 0.05);
    --btn-secondary-text: var(--color-primary);
    
    /* === SPECIAL ELEMENTS === */
    --badge-bg: var(--color-primary);
    --badge-text: #000000;
    --overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.3));
    
    /* === THEME SELECTOR MENU === */
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(218, 145, 70, 0.3);
}

/* ==================== THEME 1: Copper Sunset (Orange) ==================== */
[data-theme="copper"] {
    --bg-image: url('images/backgroundorange.png');
    --bg-primary: #1a1410;
    --bg-secondary: rgba(26, 20, 16, 0.95);
    --bg-card: rgba(26, 20, 16, 0.25);
    --bg-card-hover: rgba(218, 145, 70, 0.15);
    --bg-gradient-start: rgba(26, 20, 16, 0.6);
    --bg-gradient-mid: rgba(40, 30, 20, 0.6);
    --bg-gradient-end: rgba(26, 20, 16, 0.6);
    
    --color-primary: #da9146;
    --color-primary-dark: #b8722f;
    --color-primary-light: #f0a855;
    --color-primary-rgb: 218, 145, 70;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #da9146;
    
    --border-subtle: rgba(218, 145, 70, 0.15);
    --border-normal: rgba(218, 145, 70, 0.3);
    --border-strong: rgba(218, 145, 70, 0.5);
    --border-accent: #da9146;
    
    --shadow-glow: 0 0 30px rgba(218, 145, 70, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(218, 145, 70, 0.5);
    
    --badge-bg: #da9146;
    --btn-primary-bg: linear-gradient(135deg, #da9146 0%, #f0a855 50%, #b8722f 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(218, 145, 70, 0.3);
}

/* ==================== THEME 2: Deep Ocean (Blue) ==================== */
[data-theme="ocean"] {
    --bg-image: url('images/backgroundblue.png');
    --bg-primary: #0a1420;
    --bg-secondary: rgba(10, 20, 32, 0.95);
    --bg-card: rgba(10, 20, 32, 0.25);
    --bg-card-hover: rgba(70, 160, 210, 0.15);
    --bg-gradient-start: rgba(10, 20, 32, 0.6);
    --bg-gradient-mid: rgba(15, 30, 50, 0.6);
    --bg-gradient-end: rgba(10, 20, 32, 0.6);
    
    --color-primary: #46a0d2;
    --color-primary-dark: #2d7ba8;
    --color-primary-light: #6bb8e0;
    --color-primary-rgb: 70, 160, 210;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #46a0d2;
    
    --border-subtle: rgba(70, 160, 210, 0.15);
    --border-normal: rgba(70, 160, 210, 0.3);
    --border-strong: rgba(70, 160, 210, 0.5);
    --border-accent: #46a0d2;
    
    --shadow-glow: 0 0 30px rgba(70, 160, 210, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(70, 160, 210, 0.5);
    
    --badge-bg: #46a0d2;
    --btn-primary-bg: linear-gradient(135deg, #46a0d2 0%, #6bb8e0 50%, #2d7ba8 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(70, 160, 210, 0.3);
}

/* ==================== THEME 3: Rich Mahogany (Brown) ==================== */
[data-theme="mahogany"] {
    --bg-image: url('images/backgroundbrown.png');
    --bg-primary: #1a1410;
    --bg-secondary: rgba(26, 20, 16, 0.95);
    --bg-card: rgba(26, 20, 16, 0.25);
    --bg-card-hover: rgba(180, 115, 60, 0.15);
    --bg-gradient-start: rgba(26, 20, 16, 0.6);
    --bg-gradient-mid: rgba(40, 28, 18, 0.6);
    --bg-gradient-end: rgba(26, 20, 16, 0.6);
    
    --color-primary: #b4733c;
    --color-primary-dark: #8f5a2e;
    --color-primary-light: #d49050;
    --color-primary-rgb: 180, 115, 60;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #b4733c;
    
    --border-subtle: rgba(180, 115, 60, 0.15);
    --border-normal: rgba(180, 115, 60, 0.3);
    --border-strong: rgba(180, 115, 60, 0.5);
    --border-accent: #b4733c;
    
    --shadow-glow: 0 0 30px rgba(180, 115, 60, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(180, 115, 60, 0.5);
    
    --badge-bg: #b4733c;
    --btn-primary-bg: linear-gradient(135deg, #b4733c 0%, #d49050 50%, #8f5a2e 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(180, 115, 60, 0.3);
}

/* ==================== THEME 4: Emerald Forest (Green) ==================== */
[data-theme="emerald"] {
    --bg-image: url('images/backgroundgreen.png');
    --bg-primary: #0f1a14;
    --bg-secondary: rgba(15, 26, 20, 0.95);
    --bg-card: rgba(15, 26, 20, 0.25);
    --bg-card-hover: rgba(80, 180, 130, 0.15);
    --bg-gradient-start: rgba(15, 26, 20, 0.6);
    --bg-gradient-mid: rgba(20, 40, 30, 0.6);
    --bg-gradient-end: rgba(15, 26, 20, 0.6);
    
    --color-primary: #50b482;
    --color-primary-dark: #3d8f66;
    --color-primary-light: #6fc99a;
    --color-primary-rgb: 80, 180, 130;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #50b482;
    
    --border-subtle: rgba(80, 180, 130, 0.15);
    --border-normal: rgba(80, 180, 130, 0.3);
    --border-strong: rgba(80, 180, 130, 0.5);
    --border-accent: #50b482;
    
    --shadow-glow: 0 0 30px rgba(80, 180, 130, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(80, 180, 130, 0.5);
    
    --badge-bg: #50b482;
    --btn-primary-bg: linear-gradient(135deg, #50b482 0%, #6fc99a 50%, #3d8f66 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(80, 180, 130, 0.3);
}

/* ==================== THEME 5: Slate Stone (Gray) ==================== */
[data-theme="slate"] {
    --bg-image: url('images/backgroundgray.png');
    --bg-primary: #1a1c1e;
    --bg-secondary: rgba(26, 28, 30, 0.95);
    --bg-card: rgba(26, 28, 30, 0.25);
    --bg-card-hover: rgba(140, 155, 175, 0.15);
    --bg-gradient-start: rgba(26, 28, 30, 0.6);
    --bg-gradient-mid: rgba(40, 44, 50, 0.6);
    --bg-gradient-end: rgba(26, 28, 30, 0.6);
    
    --color-primary: #8c9baf;
    --color-primary-dark: #6a7a8f;
    --color-primary-light: #a8b5c7;
    --color-primary-rgb: 140, 155, 175;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #8c9baf;
    
    --border-subtle: rgba(140, 155, 175, 0.15);
    --border-normal: rgba(140, 155, 175, 0.3);
    --border-strong: rgba(140, 155, 175, 0.5);
    --border-accent: #8c9baf;
    
    --shadow-glow: 0 0 30px rgba(140, 155, 175, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(140, 155, 175, 0.5);
    
    --badge-bg: #8c9baf;
    --btn-primary-bg: linear-gradient(135deg, #8c9baf 0%, #a8b5c7 50%, #6a7a8f 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(140, 155, 175, 0.3);
}

/* ==================== THEME 6: Midnight Carbon (Black) ==================== */
[data-theme="midnight"] {
    --bg-image: url('images/backgroundblack.png');
    --bg-primary: #0d0d0d;
    --bg-secondary: rgba(13, 13, 13, 0.95);
    --bg-card: rgba(13, 13, 13, 0.25);
    --bg-card-hover: rgba(150, 150, 150, 0.15);
    --bg-gradient-start: rgba(13, 13, 13, 0.6);
    --bg-gradient-mid: rgba(25, 25, 25, 0.6);
    --bg-gradient-end: rgba(13, 13, 13, 0.6);
    
    --color-primary: #969696;
    --color-primary-dark: #707070;
    --color-primary-light: #b8b8b8;
    --color-primary-rgb: 150, 150, 150;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #969696;
    
    --border-subtle: rgba(150, 150, 150, 0.15);
    --border-normal: rgba(150, 150, 150, 0.3);
    --border-strong: rgba(150, 150, 150, 0.5);
    --border-accent: #969696;
    
    --shadow-glow: 0 0 30px rgba(150, 150, 150, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(150, 150, 150, 0.5);
    
    --badge-bg: #969696;
    --btn-primary-bg: linear-gradient(135deg, #969696 0%, #b8b8b8 50%, #707070 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(150, 150, 150, 0.3);
}

/* ==================== THEME 7: Highland Olive (Contrast) ==================== */
[data-theme="highland"] {
    --bg-image: url('images/backgroundforest.png');
    --bg-primary: #1a1e1a;
    --bg-secondary: rgba(26, 30, 26, 0.95);
    --bg-card: rgba(26, 30, 26, 0.25);
    --bg-card-hover: rgba(140, 155, 105, 0.15);
    --bg-gradient-start: rgba(26, 30, 26, 0.6);
    --bg-gradient-mid: rgba(38, 44, 35, 0.6);
    --bg-gradient-end: rgba(26, 30, 26, 0.6);
    
    --color-primary: #8c9b69;
    --color-primary-dark: #6d7a50;
    --color-primary-light: #a8b885;
    --color-primary-rgb: 140, 155, 105;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #8c9b69;
    
    --border-subtle: rgba(140, 155, 105, 0.15);
    --border-normal: rgba(140, 155, 105, 0.3);
    --border-strong: rgba(140, 155, 105, 0.5);
    --border-accent: #8c9b69;
    
    --shadow-glow: 0 0 30px rgba(140, 155, 105, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(140, 155, 105, 0.5);
    
    --badge-bg: #8c9b69;
    --btn-primary-bg: linear-gradient(135deg, #8c9b69 0%, #a8b885 50%, #6d7a50 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(140, 155, 105, 0.3);
}

/* ==================== THEME 8: Crimson Fire (Red) ==================== */
[data-theme="crimson"] {
    --bg-image: url('images/backgroundred.png');
    --bg-primary: #1e0f0f;
    --bg-secondary: rgba(30, 15, 15, 0.95);
    --bg-card: rgba(30, 15, 15, 0.25);
    --bg-card-hover: rgba(220, 80, 80, 0.15);
    --bg-gradient-start: rgba(30, 15, 15, 0.6);
    --bg-gradient-mid: rgba(48, 22, 22, 0.6);
    --bg-gradient-end: rgba(30, 15, 15, 0.6);
    
    --color-primary: #dc5050;
    --color-primary-dark: #b83c3c;
    --color-primary-light: #f07070;
    --color-primary-rgb: 220, 80, 80;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #dc5050;
    
    --border-subtle: rgba(220, 80, 80, 0.15);
    --border-normal: rgba(220, 80, 80, 0.3);
    --border-strong: rgba(220, 80, 80, 0.5);
    --border-accent: #dc5050;
    
    --shadow-glow: 0 0 30px rgba(220, 80, 80, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(220, 80, 80, 0.5);
    
    --badge-bg: #dc5050;
    --btn-primary-bg: linear-gradient(135deg, #dc5050 0%, #f07070 50%, #b83c3c 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(220, 80, 80, 0.3);
}

/* ==================== THEME 9: Royal Amethyst (Purple) ==================== */
[data-theme="amethyst"] {
    --bg-image: url('images/backgroundpurple.png');
    --bg-primary: #1a0f1e;
    --bg-secondary: rgba(26, 15, 30, 0.95);
    --bg-card: rgba(26, 15, 30, 0.25);
    --bg-card-hover: rgba(160, 90, 220, 0.15);
    --bg-gradient-start: rgba(26, 15, 30, 0.6);
    --bg-gradient-mid: rgba(42, 24, 50, 0.6);
    --bg-gradient-end: rgba(26, 15, 30, 0.6);
    
    --color-primary: #a05adc;
    --color-primary-dark: #7d45b0;
    --color-primary-light: #be78f0;
    --color-primary-rgb: 160, 90, 220;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-accent: #a05adc;
    
    --border-subtle: rgba(160, 90, 220, 0.15);
    --border-normal: rgba(160, 90, 220, 0.3);
    --border-strong: rgba(160, 90, 220, 0.5);
    --border-accent: #a05adc;
    
    --shadow-glow: 0 0 30px rgba(160, 90, 220, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(160, 90, 220, 0.5);
    
    --badge-bg: #a05adc;
    --btn-primary-bg: linear-gradient(135deg, #a05adc 0%, #be78f0 50%, #7d45b0 100%);
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(160, 90, 220, 0.3);
}

/* ==================== THEME 10: Arctic Snow (Light Mode) ==================== */
[data-theme="arctic"] {
    --bg-image: url('images/backgroundsnow.png');
    --bg-primary: #f8f6f2;
    --bg-secondary: rgba(248, 246, 242, 0.95);
    --bg-card: rgba(248, 246, 242, 0.25);
    --bg-card-hover: rgba(140, 100, 70, 0.15);
    --bg-gradient-start: rgba(248, 246, 242, 0.6);
    --bg-gradient-mid: rgba(238, 232, 225, 0.6);
    --bg-gradient-end: rgba(248, 246, 242, 0.6);
    
    --color-primary: #8c6446;
    --color-primary-dark: #6e4e35;
    --color-primary-light: #a87c5a;
    --color-primary-rgb: 140, 100, 70;
    --theme-primary-rgb: var(--color-primary-rgb);
    
    --text-primary: #2d2d2d;
    --text-secondary: #4a4a4a;
    --text-muted: #6b6b6b;
    --text-dark: #8a8a8a;
    --text-darker: #b0b0b0;
    --text-accent: #8c6446;
    
    --border-subtle: rgba(140, 100, 70, 0.15);
    --border-normal: rgba(140, 100, 70, 0.3);
    --border-strong: rgba(140, 100, 70, 0.5);
    --border-accent: #8c6446;
    
    --shadow-sm: 0 4px 12px rgba(140, 100, 70, 0.15);
    --shadow-md: 0 8px 24px rgba(140, 100, 70, 0.2);
    --shadow-lg: 0 12px 32px rgba(140, 100, 70, 0.25);
    --shadow-xl: 0 20px 60px rgba(140, 100, 70, 0.3);
    --shadow-glow: 0 0 30px rgba(140, 100, 70, 0.3);
    --shadow-glow-strong: 0 0 40px rgba(140, 100, 70, 0.5);
    
    --badge-bg: #8c6446;
    --badge-text: #ffffff;
    --btn-primary-bg: linear-gradient(135deg, #8c6446 0%, #a87c5a 50%, #6e4e35 100%);
    --btn-primary-text: #ffffff;
    
    --theme-menu-bg: rgba(22, 22, 22, 0.98);
    --theme-menu-text: #ffffff;
    --theme-menu-border: rgba(140, 100, 70, 0.3);
}

/* ==================== SMOOTH THEME TRANSITIONS ==================== */
body,
.floating-nav,
.social-nav,
.article-hero,
.article-large,
.article-medium,
.article-small,
.carousel-item,
.gear-card,
.channel-card,
.destination-card,
.content-section,
.article-card,
.creator-card {
    transition: background-color 0.5s ease,
                background-image 0.5s ease,
                border-color 0.5s ease,
                color 0.5s ease;
}