/* ============================================================
   SkinMerge Theme Overrides
   Each [data-theme] block overrides the :root defaults from styles.css.
   Default theme uses :root values directly — no override needed.
   ============================================================ */

/* ---- Midnight: Dark blue, Steam-inspired ---- */
[data-theme="midnight"] {
    --bg-primary: #161b22;
    --bg-secondary: #0d1117;
    --bg-dark: #0d1117;
    --bg-card: #1c2128;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-muted: #636c76;
    --accent: #58a6ff;
    --accent-hover: #79b8ff;
    --accent-light: rgba(88, 166, 255, 0.15);
    --border: #30363d;
    --border-light: #21262d;
    --success: #3fb950;
    --success-light: rgba(63, 185, 80, 0.15);
    --danger: #f85149;
    --danger-light: rgba(248, 81, 73, 0.15);
    --warning: #d29922;
    --gradient-text: linear-gradient(135deg, #c9d1d9 0%, #58a6ff 100%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    --bg-body-start: #0d1117;
    --bg-body-mid: #131a24;
    --bg-body-end: #1c2128;
    --navbar-bg: rgba(13, 17, 23, 0.92);
    --navbar-text: rgba(201, 209, 217, 0.75);
    --navbar-text-hover: #e6edf3;
    --navbar-border: rgba(48, 54, 61, 0.6);
    --card-bg-solid: #161b22;
    --card-bg-alt: #1c2128;
    --input-bg: #0d1117;
    --input-bg-white: #161b22;
    --dropdown-bg: #0d1117;
    --dropdown-item-text: #c9d1d9;
    --dropdown-item-hover: rgba(88, 166, 255, 0.12);
    --dropdown-item-selected: rgba(88, 166, 255, 0.22);
    --heading-color: #e6edf3;
    --on-bg-text: rgba(230, 237, 243, 0.85);
    --on-bg-text-muted: rgba(230, 237, 243, 0.5);
    --focus-ring: rgba(88, 166, 255, 0.3);
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --hover-bg: rgba(255, 255, 255, 0.06);
}

/* ---- Carbon: Dark neutral, orange accent ---- */
[data-theme="carbon"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #141414;
    --bg-dark: #0f0f0f;
    --bg-card: #242424;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #707070;
    --accent: #f0883e;
    --accent-hover: #d67a35;
    --accent-light: rgba(240, 136, 62, 0.15);
    --border: #333333;
    --border-light: #2a2a2a;
    --success: #4abe8a;
    --success-light: rgba(74, 190, 138, 0.15);
    --danger: #f47067;
    --danger-light: rgba(244, 112, 103, 0.15);
    --warning: #f0883e;
    --gradient-text: linear-gradient(135deg, #e0e0e0 0%, #f0883e 100%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);

    --bg-body-start: #111111;
    --bg-body-mid: #171717;
    --bg-body-end: #1c1c1c;
    --navbar-bg: rgba(17, 17, 17, 0.94);
    --navbar-text: rgba(224, 224, 224, 0.7);
    --navbar-text-hover: #f0f0f0;
    --navbar-border: rgba(51, 51, 51, 0.6);
    --card-bg-solid: #1e1e1e;
    --card-bg-alt: #242424;
    --input-bg: #1a1a1a;
    --input-bg-white: #1e1e1e;
    --dropdown-bg: #111111;
    --dropdown-item-text: #d0d0d0;
    --dropdown-item-hover: rgba(240, 136, 62, 0.12);
    --dropdown-item-selected: rgba(240, 136, 62, 0.22);
    --heading-color: #f0f0f0;
    --on-bg-text: rgba(240, 240, 240, 0.85);
    --on-bg-text-muted: rgba(240, 240, 240, 0.5);
    --focus-ring: rgba(240, 136, 62, 0.25);
    --overlay-bg: rgba(0, 0, 0, 0.75);
    --hover-bg: rgba(255, 255, 255, 0.06);
}

/* ---- Arctic: Light, crisp, indigo accent ---- */
[data-theme="arctic"] {
    --bg-primary: #f0f3f6;
    --bg-secondary: #e8ecf0;
    --bg-dark: #dde3e8;
    --bg-card: #ffffff;
    --text-primary: #24292f;
    --text-secondary: #57606a;
    --text-muted: #8c959f;
    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-light: rgba(99, 102, 241, 0.1);
    --border: #d0d7de;
    --border-light: #e8ecf0;
    --success: #1a7f37;
    --success-light: rgba(26, 127, 55, 0.1);
    --danger: #cf222e;
    --danger-light: rgba(207, 34, 46, 0.1);
    --warning: #bf8700;
    --gradient-text: linear-gradient(135deg, #24292f 0%, #6366f1 100%);
    --shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.08);
    --shadow-md: 0 4px 6px rgba(31, 35, 40, 0.1);
    --shadow-lg: 0 10px 25px rgba(31, 35, 40, 0.12);

    --bg-body-start: #dde3e8;
    --bg-body-mid: #e8ecf0;
    --bg-body-end: #f0f3f6;
    --navbar-bg: rgba(255, 255, 255, 0.88);
    --navbar-text: rgba(36, 41, 47, 0.65);
    --navbar-text-hover: #24292f;
    --navbar-border: rgba(208, 215, 222, 0.6);
    --card-bg-solid: #ffffff;
    --card-bg-alt: #f6f8fa;
    --input-bg: #f0f3f6;
    --input-bg-white: #ffffff;
    --dropdown-bg: #24292f;
    --dropdown-item-text: #e6edf3;
    --dropdown-item-hover: rgba(99, 102, 241, 0.2);
    --dropdown-item-selected: rgba(99, 102, 241, 0.3);
    --heading-color: #24292f;
    --on-bg-text: rgba(36, 41, 47, 0.85);
    --on-bg-text-muted: rgba(36, 41, 47, 0.5);
    --focus-ring: rgba(99, 102, 241, 0.2);
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --hover-bg: rgba(0, 0, 0, 0.04);
}

/* ---- Neon: Cyberpunk-inspired dark theme ---- */
[data-theme="neon"] {
    --bg-primary: #12122a;
    --bg-secondary: #0a0a1a;
    --bg-dark: #08081a;
    --bg-card: #1a1a2e;
    --text-primary: #e0e0ff;
    --text-secondary: #9090c0;
    --text-muted: #606090;
    --accent: #00ff88;
    --accent-hover: #00cc6e;
    --accent-light: rgba(0, 255, 136, 0.1);
    --border: #2a2a4e;
    --border-light: #22223a;
    --success: #00ff88;
    --success-light: rgba(0, 255, 136, 0.12);
    --danger: #ff4466;
    --danger-light: rgba(255, 68, 102, 0.15);
    --warning: #ffaa00;
    --gradient-text: linear-gradient(135deg, #e0e0ff 0%, #00ff88 100%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 255, 136, 0.06);
    --shadow-lg: 0 10px 25px rgba(0, 255, 136, 0.08);

    --bg-body-start: #08081a;
    --bg-body-mid: #0e0e22;
    --bg-body-end: #14142c;
    --navbar-bg: rgba(10, 10, 26, 0.92);
    --navbar-text: rgba(224, 224, 255, 0.65);
    --navbar-text-hover: #e0e0ff;
    --navbar-border: rgba(42, 42, 78, 0.6);
    --card-bg-solid: #14142c;
    --card-bg-alt: #1a1a2e;
    --input-bg: #0e0e22;
    --input-bg-white: #14142c;
    --dropdown-bg: #0a0a1a;
    --dropdown-item-text: #d0d0f0;
    --dropdown-item-hover: rgba(0, 255, 136, 0.1);
    --dropdown-item-selected: rgba(0, 255, 136, 0.2);
    --heading-color: #e0e0ff;
    --on-bg-text: rgba(224, 224, 255, 0.85);
    --on-bg-text-muted: rgba(224, 224, 255, 0.5);
    --focus-ring: rgba(0, 255, 136, 0.25);
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --hover-bg: rgba(255, 255, 255, 0.04);
}

/* ---- Royal: Deep purple with gold accent ---- */
[data-theme="royal"] {
    --bg-primary: #201530;
    --bg-secondary: #1a1225;
    --bg-dark: #140e1e;
    --bg-card: #2a1e3a;
    --text-primary: #e8ddf0;
    --text-secondary: #a090b0;
    --text-muted: #706080;
    --accent: #f5c542;
    --accent-hover: #e0b33a;
    --accent-light: rgba(245, 197, 66, 0.12);
    --border: #3a2e4e;
    --border-light: #302442;
    --success: #4abe8a;
    --success-light: rgba(74, 190, 138, 0.15);
    --danger: #e07070;
    --danger-light: rgba(224, 112, 112, 0.15);
    --warning: #f5c542;
    --gradient-text: linear-gradient(135deg, #e8ddf0 0%, #f5c542 100%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);

    --bg-body-start: #140e1e;
    --bg-body-mid: #1a1225;
    --bg-body-end: #201530;
    --navbar-bg: rgba(20, 14, 30, 0.92);
    --navbar-text: rgba(232, 221, 240, 0.65);
    --navbar-text-hover: #e8ddf0;
    --navbar-border: rgba(58, 46, 78, 0.6);
    --card-bg-solid: #221838;
    --card-bg-alt: #2a1e3a;
    --input-bg: #1a1225;
    --input-bg-white: #221838;
    --dropdown-bg: #140e1e;
    --dropdown-item-text: #d8cce8;
    --dropdown-item-hover: rgba(245, 197, 66, 0.1);
    --dropdown-item-selected: rgba(245, 197, 66, 0.2);
    --heading-color: #f0e8f8;
    --on-bg-text: rgba(240, 232, 248, 0.85);
    --on-bg-text-muted: rgba(240, 232, 248, 0.5);
    --focus-ring: rgba(245, 197, 66, 0.25);
    --overlay-bg: rgba(0, 0, 0, 0.75);
    --hover-bg: rgba(255, 255, 255, 0.05);
}