/* ===========================
   Theme System
   =========================== */

:root {
  --sidebar-width: 220px;
  --topbar-height: 56px;
  --card-radius: 0.75rem;
}

/* =============================================
   Theme System - 10 keyboard-inspired themes
   5 Light (Classic Beige, Slate, Sakana, Botanical, Shell White)
   5 Dark  (Carbon, Synthwave, Hacker, Tidal, Viper)
   ============================================= */

/* --- L1: Classic Beige (retro beige keyboard) --- */
[data-theme="light-classic"],
:root {
  --sidebar-bg: #2c2520;
  --sidebar-color: #b8a898;
  --sidebar-active-color: #fff;
  --sidebar-active-bg: rgba(255,255,255,0.1);
  --sidebar-hover-bg: rgba(255,255,255,0.05);
  --sidebar-border: rgba(255,255,255,0.08);
  --sidebar-profile-bg: rgba(255,255,255,0.06);
  --sidebar-terms-color: rgba(255,255,255,0.5);
  --sidebar-terms-link: rgba(255,255,255,0.55);
  --topbar-bg: rgba(255,252,245,0.92);
  --topbar-shadow: 0 1px 3px rgba(80,60,40,0.12);
  --body-bg: #f0e8dc;
  --body-gradient: radial-gradient(ellipse at 60% 35%, rgba(220,200,160,0.15) 0%, transparent 55%),
                   linear-gradient(150deg, #f2ead8 0%, #ece2d4 100%);
  --accent: #8b1a1a;
  --accent-rgb: 139,26,26;
  --key-led: #c03030;
  --key-led-rgb: 192,48,48;
  --border-color: #d8ccbc;
  --text-primary: #2c2218;
  --text-secondary: #6a5a48;
  --text-muted: #706040;
  --card-bg: rgba(255,252,245,0.88);
  --card-actions-bg: rgba(248,242,232,0.9);
  --code-bg: rgba(244,238,228,0.9);
  --tag-bg: #e4d8c8;
  --error-bg: #fff0f0;
  --empty-bg: rgba(255,252,245,0.88);
  --footer-border: #d0c4b4;
  --footer-color: #7a6a58;
}

/* --- L2: Slate (professional gray/navy keyboard) --- */
[data-theme="light-slate"] {
  --sidebar-bg: #1c2028;
  --sidebar-color: #8898b0;
  --body-bg: #eaecf0;
  --body-gradient: radial-gradient(ellipse at 55% 40%, rgba(160,170,200,0.08) 0%, transparent 50%),
                   linear-gradient(160deg, #eceef2 0%, #e4e6ee 100%);
  --accent: #2a4a7a;
  --accent-rgb: 42,74,122;
  --key-led: #4a7acc;
  --key-led-rgb: 74,122,204;
  --border-color: #c8ccd4;
  --text-primary: #1c2028;
  --text-secondary: #4a5468;
  --text-muted: #596478;
  --card-bg: rgba(255,255,255,0.88);
  --card-actions-bg: rgba(244,246,250,0.9);
  --code-bg: rgba(240,242,248,0.9);
  --tag-bg: #d8dce6;
  --error-bg: #fff5f5;
  --empty-bg: rgba(255,255,255,0.88);
  --footer-border: #c0c4d0;
  --footer-color: #6a7080;
}

/* --- L3: Sakana (Japanese blue/salmon keyboard) --- */
[data-theme="light-sakana"] {
  --sidebar-bg: #182838;
  --sidebar-color: #88a0c0;
  --body-bg: #eff2f8;
  --body-gradient: radial-gradient(ellipse at 65% 30%, rgba(208,96,80,0.06) 0%, transparent 45%),
                   radial-gradient(ellipse at 30% 70%, rgba(80,120,180,0.06) 0%, transparent 50%),
                   linear-gradient(160deg, #f0f3f8 0%, #eaeff6 100%);
  --accent: #b04838;
  --accent-rgb: 176,72,56;
  --key-led: #ff7868;
  --key-led-rgb: 255,120,104;
  --border-color: #c8d0e0;
  --text-primary: #1a2838;
  --text-secondary: #4a5a78;
  --text-muted: #4a5a78;
  --card-bg: rgba(255,255,255,0.88);
  --card-actions-bg: rgba(246,248,254,0.9);
  --code-bg: rgba(242,244,252,0.9);
  --tag-bg: #d8e0f0;
  --error-bg: #fff5f3;
  --empty-bg: rgba(255,255,255,0.88);
  --footer-border: #c0c8d8;
  --footer-color: #6070a0;
}

/* --- L4: Botanical (green/cream keyboard) --- */
[data-theme="light-botanical"] {
  --sidebar-bg: #1a2818;
  --sidebar-color: #88a880;
  --body-bg: #f2f4ec;
  --body-gradient: radial-gradient(ellipse at 45% 50%, rgba(120,170,100,0.08) 0%, transparent 50%),
                   linear-gradient(150deg, #f4f6ec 0%, #eef0e6 100%);
  --accent: #2a6838;
  --accent-rgb: 42,104,56;
  --key-led: #48b858;
  --key-led-rgb: 72,184,88;
  --border-color: #c8d4c0;
  --text-primary: #1a2818;
  --text-secondary: #4a5e44;
  --text-muted: #4a6a42;
  --card-bg: rgba(255,255,252,0.88);
  --card-actions-bg: rgba(248,250,242,0.9);
  --code-bg: rgba(244,248,238,0.9);
  --tag-bg: #d8e4d0;
  --error-bg: #fff5f5;
  --empty-bg: rgba(255,255,252,0.88);
  --footer-border: #c0d0b8;
  --footer-color: #5a7050;
}

/* --- L5: Shell White (minimal white keyboard - SIMPLE) --- */
[data-theme="light-shell"] {
  --sidebar-bg: #1a1a1e;
  --sidebar-color: #909098;
  --body-bg: #f6f6f8;
  --body-gradient: linear-gradient(180deg, #f8f8fa 0%, #f2f2f6 100%);
  --accent: #505058;
  --accent-rgb: 80,80,88;
  --key-led: #888890;
  --key-led-rgb: 136,136,144;
  --border-color: #dcdce0;
  --text-primary: #1a1a1e;
  --text-secondary: #505058;
  --text-muted: #646468;
  --card-bg: rgba(255,255,255,0.92);
  --card-actions-bg: rgba(248,248,250,0.9);
  --code-bg: rgba(244,244,248,0.9);
  --tag-bg: #e4e4e8;
  --error-bg: #fff5f5;
  --empty-bg: rgba(255,255,255,0.92);
  --footer-border: #d0d0d4;
  --footer-color: #808088;
}

/* --- D1: Carbon (industrial charcoal/orange keyboard) --- */
[data-theme="dark-carbon"] {
  --sidebar-bg: #0e0e10;
  --sidebar-color: #8a8888;
  --sidebar-active-color: #ffd0a0;
  --sidebar-active-bg: rgba(232,116,42,0.1);
  --sidebar-hover-bg: rgba(232,116,42,0.05);
  --sidebar-border: rgba(232,116,42,0.08);
  --sidebar-profile-bg: rgba(232,116,42,0.06);
  --sidebar-terms-color: rgba(220,180,150,0.6);
  --sidebar-terms-link: rgba(220,180,150,0.65);
  --topbar-bg: rgba(18,18,20,0.95);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.4);
  --body-bg: #141416;
  --body-gradient: radial-gradient(ellipse at 65% 30%, rgba(232,116,42,0.08) 0%, transparent 50%),
                   linear-gradient(150deg, #1a1a1c 0%, #121214 100%);
  --accent: #e8742a;
  --accent-rgb: 232,116,42;
  --key-led: #ff8c3c;
  --key-led-rgb: 255,140,60;
  --border-color: #2a2a2e;
  --text-primary: #e0dcd8;
  --text-secondary: #a8a4a0;
  --text-muted: #8a8480;
  --card-bg: rgba(24,24,28,0.88);
  --card-actions-bg: rgba(18,18,22,0.9);
  --code-bg: rgba(14,14,16,0.9);
  --tag-bg: #2a2828;
  --error-bg: #401818;
  --empty-bg: rgba(24,24,28,0.88);
  --footer-border: #2a2a2e;
  --footer-color: #787470;
}

/* --- D2: Synthwave (retro synthwave magenta/cyan keyboard) --- */
[data-theme="dark-synthwave"] {
  --sidebar-bg: #0a0818;
  --sidebar-color: #8870a8;
  --sidebar-active-color: #ffb0e0;
  --sidebar-active-bg: rgba(232,72,152,0.1);
  --sidebar-hover-bg: rgba(232,72,152,0.05);
  --sidebar-border: rgba(200,60,160,0.08);
  --sidebar-profile-bg: rgba(200,60,160,0.06);
  --sidebar-terms-color: rgba(200,160,220,0.62);
  --sidebar-terms-link: rgba(200,160,220,0.67);
  --topbar-bg: rgba(14,10,28,0.95);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.5);
  --body-bg: #100e20;
  --body-gradient: radial-gradient(ellipse at 60% 25%, rgba(232,72,152,0.1) 0%, transparent 45%),
                   radial-gradient(ellipse at 30% 70%, rgba(64,216,240,0.06) 0%, transparent 45%),
                   linear-gradient(150deg, #161228 0%, #0e0c1c 100%);
  --accent: #e84898;
  --accent-rgb: 232,72,152;
  --key-led: #e84898;
  --key-led-rgb: 232,72,152;
  --border-color: #2a2040;
  --text-primary: #e0d8f0;
  --text-secondary: #a890c0;
  --text-muted: #8a78a8;
  --card-bg: rgba(20,16,36,0.88);
  --card-actions-bg: rgba(16,12,28,0.9);
  --code-bg: rgba(12,10,22,0.9);
  --tag-bg: #282040;
  --error-bg: #401028;
  --empty-bg: rgba(20,16,36,0.88);
  --footer-border: #282040;
  --footer-color: #705898;
}

/* --- D3: Hacker (minimal black/gold keyboard - SIMPLE) --- */
[data-theme="dark-hacker"] {
  --sidebar-bg: #0a0a0c;
  --sidebar-color: #8a8a92;
  --sidebar-active-color: #d8d0c0;
  --sidebar-active-bg: rgba(200,180,120,0.08);
  --sidebar-hover-bg: rgba(200,180,120,0.04);
  --sidebar-border: rgba(160,150,120,0.06);
  --sidebar-profile-bg: rgba(160,150,120,0.05);
  --sidebar-terms-color: rgba(180,170,150,0.62);
  --sidebar-terms-link: rgba(180,170,150,0.67);
  --topbar-bg: rgba(14,14,16,0.96);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.4);
  --body-bg: #121214;
  --body-gradient: linear-gradient(180deg, #161618 0%, #101012 100%);
  --accent: #b8a060;
  --accent-rgb: 184,160,96;
  --key-led: #c8b070;
  --key-led-rgb: 200,176,112;
  --border-color: #242428;
  --text-primary: #d0ccc4;
  --text-secondary: #989490;
  --text-muted: #888480;
  --card-bg: rgba(20,20,24,0.88);
  --card-actions-bg: rgba(16,16,18,0.9);
  --code-bg: rgba(12,12,14,0.9);
  --tag-bg: #242424;
  --error-bg: #3a1818;
  --empty-bg: rgba(20,20,24,0.88);
  --footer-border: #242428;
  --footer-color: #686460;
}

/* --- D4: Tidal (deep teal/neon green ocean keyboard) --- */
[data-theme="dark-tidal"] {
  --sidebar-bg: #060e12;
  --sidebar-color: #508a88;
  --sidebar-active-color: #b0f0d8;
  --sidebar-active-bg: rgba(48,240,160,0.08);
  --sidebar-hover-bg: rgba(48,240,160,0.04);
  --sidebar-border: rgba(40,180,130,0.08);
  --sidebar-profile-bg: rgba(40,180,130,0.05);
  --sidebar-terms-color: rgba(120,200,180,0.62);
  --sidebar-terms-link: rgba(120,200,180,0.67);
  --topbar-bg: rgba(10,18,20,0.95);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.4);
  --body-bg: #0a1418;
  --body-gradient: radial-gradient(ellipse at 45% 40%, rgba(48,240,160,0.06) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 70%, rgba(20,100,80,0.08) 0%, transparent 45%),
                   linear-gradient(160deg, #0e1a1e 0%, #0a1418 50%, #060e10 100%);
  --accent: #28c8a0;
  --accent-rgb: 40,200,160;
  --key-led: #30f0a0;
  --key-led-rgb: 48,240,160;
  --border-color: #1a2e30;
  --text-primary: #c8e8e0;
  --text-secondary: #88b8a8;
  --text-muted: #5a9484;
  --card-bg: rgba(14,24,28,0.88);
  --card-actions-bg: rgba(10,18,22,0.9);
  --code-bg: rgba(8,14,18,0.9);
  --tag-bg: #1a2e2e;
  --error-bg: #3a1520;
  --empty-bg: rgba(14,24,28,0.88);
  --footer-border: #1a2e30;
  --footer-color: #608878;
}

/* --- D5: Viper (gaming black/vivid green keyboard) --- */
[data-theme="dark-viper"] {
  --sidebar-bg: #080a08;
  --sidebar-color: #78a078;
  --sidebar-active-color: #c0ffc0;
  --sidebar-active-bg: rgba(0,255,85,0.08);
  --sidebar-hover-bg: rgba(0,255,85,0.04);
  --sidebar-border: rgba(0,200,50,0.06);
  --sidebar-profile-bg: rgba(0,200,50,0.05);
  --sidebar-terms-color: rgba(120,200,120,0.62);
  --sidebar-terms-link: rgba(120,200,120,0.67);
  --topbar-bg: rgba(12,14,12,0.96);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.5);
  --body-bg: #0c0e0c;
  --body-gradient: radial-gradient(ellipse at 50% 40%, rgba(0,255,85,0.05) 0%, transparent 45%),
                   linear-gradient(180deg, #101210 0%, #080a08 100%);
  --accent: #00cc44;
  --accent-rgb: 0,204,68;
  --key-led: #00ff55;
  --key-led-rgb: 0,255,85;
  --border-color: #1a2a1a;
  --text-primary: #d0e0d0;
  --text-secondary: #90a890;
  --text-muted: #6a8a6a;
  --card-bg: rgba(16,20,16,0.88);
  --card-actions-bg: rgba(12,16,12,0.9);
  --code-bg: rgba(10,12,10,0.9);
  --tag-bg: #1a2a1a;
  --error-bg: #3a1518;
  --empty-bg: rgba(16,20,16,0.88);
  --footer-border: #1a2a1a;
  --footer-color: #608060;
}