/* ==========================================================================
   OS9LIVES — Theme Definitions
   Each theme defines CSS variables that control the desktop appearance.
   ========================================================================== */

/* ===== DEFAULT (Classic Mac OS 9 Platinum) ===== */
.theme-default {
  --desktop-bg: #555580;
  --desktop-pattern: 
    repeating-linear-gradient(90deg, 
      rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 2px, 
      transparent 2px, transparent 4px);
  --menubar-bg: #cccccc;
  --menubar-fg: #000000;
  --menubar-hover: rgba(0,0,0,0.15);
  --menubar-active: #000000;
  --menubar-active-fg: #ffffff;
  --window-bg: #dddddd;
  --window-fg: #000000;
  --titlebar-bg: #cccccc;
  --titlebar-inactive-bg: #aaaaaa;
  --titlebar-fg: #000000;
  --content-bg: #ffffff;
  --content-fg: #000000;
  --border-color: #000000;
  --close-box-bg: #ffffff;
  --close-box-border: #000000;
  --dropdown-bg: #eeeeee;
  --dropdown-hover: #000000;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.3);
  --footer-fg: rgba(255,255,255,0.6);
  --accent: #0000aa;
  --theme-swatch: linear-gradient(135deg, #cccccc 50%, #555580 50%);
}

/* ===== PUNK (Red/Black anarchy from the SVG) ===== */
.theme-punk {
  --desktop-bg: #1a0a0a;
  --desktop-pattern: 
    radial-gradient(circle, rgba(255,0,68,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 16px 16px;
  --menubar-bg: #f0f0f0;
  --menubar-fg: #000000;
  --menubar-hover: rgba(255,0,68,0.2);
  --menubar-active: #ff0044;
  --menubar-active-fg: #ffffff;
  --window-bg: #2a1a1a;
  --window-fg: #ffdddd;
  --titlebar-bg: #ff0044;
  --titlebar-inactive-bg: #4a1010;
  --titlebar-fg: #ffffff;
  --content-bg: #1a0a0a;
  --content-fg: #ffdddd;
  --border-color: #ff0044;
  --close-box-bg: #000000;
  --close-box-border: #ff0044;
  --dropdown-bg: #2a1a1a;
  --dropdown-hover: #ff0044;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.5);
  --footer-fg: rgba(255,0,68,0.6);
  --accent: #ffdd00;
  --theme-swatch: linear-gradient(135deg, #ff0044 50%, #1a0a0a 50%);
}

/* ===== FOREST (Kaleidoscope-inspired deep green) ===== */
.theme-forest {
  --desktop-bg: #1a2a1a;
  --desktop-pattern:
    radial-gradient(circle, rgba(100,200,100,0.06) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #d0e0d0;
  --menubar-fg: #1a2a1a;
  --menubar-hover: rgba(100,200,100,0.2);
  --menubar-active: #2a5a2a;
  --menubar-active-fg: #ffffff;
  --window-bg: #c8d8c8;
  --window-fg: #1a2a1a;
  --titlebar-bg: #8aba8a;
  --titlebar-inactive-bg: #6a8a6a;
  --titlebar-fg: #1a2a1a;
  --content-bg: #f0f8f0;
  --content-fg: #1a2a1a;
  --border-color: #4a6a4a;
  --close-box-bg: #f0f8f0;
  --close-box-border: #4a6a4a;
  --dropdown-bg: #d8e8d8;
  --dropdown-hover: #2a5a2a;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(138,186,138,0.6);
  --accent: #4a9a4a;
  --theme-swatch: linear-gradient(135deg, #8aba8a 50%, #1a2a1a 50%);
}

/* ===== LEMON (Yellow/Black high contrast) ===== */
.theme-lemon {
  --desktop-bg: #2a2a00;
  --desktop-pattern:
    repeating-linear-gradient(45deg,
      rgba(255,221,0,0.04) 0px, rgba(255,221,0,0.04) 4px,
      transparent 4px, transparent 8px);
  --menubar-bg: #ffdd00;
  --menubar-fg: #000000;
  --menubar-hover: rgba(0,0,0,0.15);
  --menubar-active: #000000;
  --menubar-active-fg: #ffdd00;
  --window-bg: #f8e890;
  --window-fg: #000000;
  --titlebar-bg: #ffdd00;
  --titlebar-inactive-bg: #aa9900;
  --titlebar-fg: #000000;
  --content-bg: #ffffee;
  --content-fg: #000000;
  --border-color: #000000;
  --close-box-bg: #ffffff;
  --close-box-border: #000000;
  --dropdown-bg: #ffdd00;
  --dropdown-hover: #000000;
  --dropdown-hover-fg: #ffdd00;
  --footer-bg: rgba(0,0,0,0.5);
  --footer-fg: rgba(255,221,0,0.6);
  --accent: #ff8800;
  --theme-swatch: linear-gradient(135deg, #ffdd00 50%, #2a2a00 50%);
}

/* ===== ICE (Cool blue/white winter) ===== */
.theme-ice {
  --desktop-bg: #202838;
  --desktop-pattern:
    radial-gradient(circle, rgba(150,200,255,0.06) 1px, transparent 1px);
  --desktop-pattern-size: 14px 14px;
  --menubar-bg: #d8e8f8;
  --menubar-fg: #202838;
  --menubar-hover: rgba(100,150,255,0.2);
  --menubar-active: #4a8acf;
  --menubar-active-fg: #ffffff;
  --window-bg: #c8d8e8;
  --window-fg: #202838;
  --titlebar-bg: #88aacc;
  --titlebar-inactive-bg: #6688aa;
  --titlebar-fg: #ffffff;
  --content-bg: #f0f8ff;
  --content-fg: #202838;
  --border-color: #4a6a8a;
  --close-box-bg: #f0f8ff;
  --close-box-border: #4a6a8a;
  --dropdown-bg: #d8e8f8;
  --dropdown-hover: #4a8acf;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(136,170,204,0.6);
  --accent: #4a8acf;
  --theme-swatch: linear-gradient(135deg, #88aacc 50%, #202838 50%);
}

/* ===== GRAPE (iMac G3 Grape — replaces old grape) ===== */
.theme-grape {
  --desktop-bg: #2a0a3a;
  --desktop-pattern:
    radial-gradient(circle, rgba(180,100,255,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #d8c0e8;
  --menubar-fg: #2a0a3a;
  --menubar-hover: rgba(180,100,255,0.2);
  --menubar-active: #7b2d8e;
  --menubar-active-fg: #ffffff;
  --window-bg: #c8a8d8;
  --window-fg: #2a0a3a;
  --titlebar-bg: #9a4aba;
  --titlebar-inactive-bg: #6a2a8a;
  --titlebar-fg: #ffffff;
  --content-bg: #f0e0f8;
  --content-fg: #2a0a3a;
  --border-color: #5a1a7a;
  --close-box-bg: #f0e0f8;
  --close-box-border: #5a1a7a;
  --dropdown-bg: #d8c0e8;
  --dropdown-hover: #7b2d8e;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(154,74,186,0.6);
  --accent: #9a4adf;
  --theme-swatch: linear-gradient(135deg, #7b2d8e 50%, #2a0a3a 50%);
}

/* ===== BONDI BLUE (iMac G3 original — August 1998) ===== */
.theme-bondi {
  --desktop-bg: #1a3a5a;
  --desktop-pattern:
    radial-gradient(circle, rgba(90,140,176,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #c0d8e8;
  --menubar-fg: #1a3a5a;
  --menubar-hover: rgba(90,140,176,0.2);
  --menubar-active: #5a8cb0;
  --menubar-active-fg: #ffffff;
  --window-bg: #b0c8d8;
  --window-fg: #1a3a5a;
  --titlebar-bg: #5a8cb0;
  --titlebar-inactive-bg: #4a6a8a;
  --titlebar-fg: #ffffff;
  --content-bg: #e8f0f8;
  --content-fg: #1a3a5a;
  --border-color: #3a5a7a;
  --close-box-bg: #e8f0f8;
  --close-box-border: #3a5a7a;
  --dropdown-bg: #c0d8e8;
  --dropdown-hover: #5a8cb0;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(90,140,176,0.6);
  --accent: #5a8cb0;
  --theme-swatch: linear-gradient(135deg, #5a8cb0 50%, #1a3a5a 50%);
}

/* ===== BLUEBERRY (iMac G3 — January 1999) ===== */
.theme-blueberry {
  --desktop-bg: #1a3a8a;
  --desktop-pattern:
    radial-gradient(circle, rgba(42,127,255,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #c0d8f8;
  --menubar-fg: #1a3a8a;
  --menubar-hover: rgba(42,127,255,0.2);
  --menubar-active: #2a7fff;
  --menubar-active-fg: #ffffff;
  --window-bg: #a8c8f0;
  --window-fg: #1a3a8a;
  --titlebar-bg: #2a7fff;
  --titlebar-inactive-bg: #1a5aaa;
  --titlebar-fg: #ffffff;
  --content-bg: #e8f0ff;
  --content-fg: #1a3a8a;
  --border-color: #2a5aaa;
  --close-box-bg: #e8f0ff;
  --close-box-border: #2a5aaa;
  --dropdown-bg: #c0d8f8;
  --dropdown-hover: #2a7fff;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(42,127,255,0.6);
  --accent: #2a7fff;
  --theme-swatch: linear-gradient(135deg, #2a7fff 50%, #1a3a8a 50%);
}

/* ===== TANGERINE (iMac G3 — January 1999) ===== */
.theme-tangerine {
  --desktop-bg: #8a4a00;
  --desktop-pattern:
    radial-gradient(circle, rgba(255,140,0,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #f8e0c0;
  --menubar-fg: #8a4a00;
  --menubar-hover: rgba(255,140,0,0.2);
  --menubar-active: #ff8c00;
  --menubar-active-fg: #ffffff;
  --window-bg: #f0c890;
  --window-fg: #8a4a00;
  --titlebar-bg: #ff8c00;
  --titlebar-inactive-bg: #cc6a00;
  --titlebar-fg: #ffffff;
  --content-bg: #fff8ee;
  --content-fg: #8a4a00;
  --border-color: #aa6a00;
  --close-box-bg: #fff8ee;
  --close-box-border: #aa6a00;
  --dropdown-bg: #f8e0c0;
  --dropdown-hover: #ff8c00;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(255,140,0,0.6);
  --accent: #ff6a00;
  --theme-swatch: linear-gradient(135deg, #ff8c00 50%, #8a4a00 50%);
}

/* ===== LIME (iMac G3 — January 1999) ===== */
.theme-lime {
  --desktop-bg: #2a5a1a;
  --desktop-pattern:
    radial-gradient(circle, rgba(118,214,58,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #d8f0c0;
  --menubar-fg: #2a5a1a;
  --menubar-hover: rgba(118,214,58,0.2);
  --menubar-active: #76d63a;
  --menubar-active-fg: #ffffff;
  --window-bg: #b8e088;
  --window-fg: #2a5a1a;
  --titlebar-bg: #76d63a;
  --titlebar-inactive-bg: #5a9a2a;
  --titlebar-fg: #ffffff;
  --content-bg: #f0ffe8;
  --content-fg: #2a5a1a;
  --border-color: #4a7a2a;
  --close-box-bg: #f0ffe8;
  --close-box-border: #4a7a2a;
  --dropdown-bg: #d8f0c0;
  --dropdown-hover: #76d63a;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(118,214,58,0.6);
  --accent: #5aba2a;
  --theme-swatch: linear-gradient(135deg, #76d63a 50%, #2a5a1a 50%);
}

/* ===== STRAWBERRY (iMac G3 — January 1999) ===== */
.theme-strawberry {
  --desktop-bg: #8a2a2a;
  --desktop-pattern:
    radial-gradient(circle, rgba(255,90,90,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #f8d0d0;
  --menubar-fg: #8a2a2a;
  --menubar-hover: rgba(255,90,90,0.2);
  --menubar-active: #ff5a5a;
  --menubar-active-fg: #ffffff;
  --window-bg: #f0a8a8;
  --window-fg: #8a2a2a;
  --titlebar-bg: #ff5a5a;
  --titlebar-inactive-bg: #cc3a3a;
  --titlebar-fg: #ffffff;
  --content-bg: #fff0f0;
  --content-fg: #8a2a2a;
  --border-color: #aa3a3a;
  --close-box-bg: #fff0f0;
  --close-box-border: #aa3a3a;
  --dropdown-bg: #f8d0d0;
  --dropdown-hover: #ff5a5a;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(255,90,90,0.6);
  --accent: #ee3030;
  --theme-swatch: linear-gradient(135deg, #ff5a5a 50%, #8a2a2a 50%);
}

/* ===== INDIGO (iMac G3 — October 1999) ===== */
.theme-indigo {
  --desktop-bg: #1a1a5a;
  --desktop-pattern:
    radial-gradient(circle, rgba(75,82,176,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #c8c8f0;
  --menubar-fg: #1a1a5a;
  --menubar-hover: rgba(75,82,176,0.2);
  --menubar-active: #4b52b0;
  --menubar-active-fg: #ffffff;
  --window-bg: #b0b0e0;
  --window-fg: #1a1a5a;
  --titlebar-bg: #4b52b0;
  --titlebar-inactive-bg: #3a3a8a;
  --titlebar-fg: #ffffff;
  --content-bg: #e8e8ff;
  --content-fg: #1a1a5a;
  --border-color: #3a3a8a;
  --close-box-bg: #e8e8ff;
  --close-box-border: #3a3a8a;
  --dropdown-bg: #c8c8f0;
  --dropdown-hover: #4b52b0;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(75,82,176,0.6);
  --accent: #6040cf;
  --theme-swatch: linear-gradient(135deg, #4b52b0 50%, #1a1a5a 50%);
}

/* ===== RUBY (iMac G3 — October 1999) ===== */
.theme-ruby {
  --desktop-bg: #4a0a1a;
  --desktop-pattern:
    radial-gradient(circle, rgba(192,32,64,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #f0c8d0;
  --menubar-fg: #4a0a1a;
  --menubar-hover: rgba(192,32,64,0.2);
  --menubar-active: #c02040;
  --menubar-active-fg: #ffffff;
  --window-bg: #e0a0b0;
  --window-fg: #4a0a1a;
  --titlebar-bg: #c02040;
  --titlebar-inactive-bg: #8a1a2a;
  --titlebar-fg: #ffffff;
  --content-bg: #fff0f2;
  --content-fg: #4a0a1a;
  --border-color: #7a1a2a;
  --close-box-bg: #fff0f2;
  --close-box-border: #7a1a2a;
  --dropdown-bg: #f0c8d0;
  --dropdown-hover: #c02040;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.5);
  --footer-fg: rgba(192,32,64,0.6);
  --accent: #e02050;
  --theme-swatch: linear-gradient(135deg, #c02040 50%, #4a0a1a 50%);
}

/* ===== SAGE (iMac G3 — October 1999) ===== */
.theme-sage {
  --desktop-bg: #4a5a2a;
  --desktop-pattern:
    radial-gradient(circle, rgba(176,200,120,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #e8f0d0;
  --menubar-fg: #4a5a2a;
  --menubar-hover: rgba(176,200,120,0.2);
  --menubar-active: #b0c878;
  --menubar-active-fg: #ffffff;
  --window-bg: #d0e0a8;
  --window-fg: #4a5a2a;
  --titlebar-bg: #b0c878;
  --titlebar-inactive-bg: #8a9a5a;
  --titlebar-fg: #ffffff;
  --content-bg: #f8ffe8;
  --content-fg: #4a5a2a;
  --border-color: #6a7a4a;
  --close-box-bg: #f8ffe8;
  --close-box-border: #6a7a4a;
  --dropdown-bg: #e8f0d0;
  --dropdown-hover: #b0c878;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(176,200,120,0.6);
  --accent: #9aba50;
  --theme-swatch: linear-gradient(135deg, #b0c878 50%, #4a5a2a 50%);
}

/* ===== GRAPHITE (iMac G3 — July 2000) ===== */
.theme-graphite {
  --desktop-bg: #2a2a2a;
  --desktop-pattern:
    radial-gradient(circle, rgba(138,138,138,0.06) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #d0d0d0;
  --menubar-fg: #2a2a2a;
  --menubar-hover: rgba(138,138,138,0.2);
  --menubar-active: #5a5a5a;
  --menubar-active-fg: #ffffff;
  --window-bg: #b8b8b8;
  --window-fg: #2a2a2a;
  --titlebar-bg: #8a8a8a;
  --titlebar-inactive-bg: #6a6a6a;
  --titlebar-fg: #ffffff;
  --content-bg: #f0f0f0;
  --content-fg: #2a2a2a;
  --border-color: #5a5a5a;
  --close-box-bg: #f0f0f0;
  --close-box-border: #5a5a5a;
  --dropdown-bg: #d0d0d0;
  --dropdown-hover: #5a5a5a;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.5);
  --footer-fg: rgba(138,138,138,0.6);
  --accent: #aaaaaa;
  --theme-swatch: linear-gradient(135deg, #8a8a8a 50%, #2a2a2a 50%);
}

/* ===== SNOW (iMac G3 — February 2001) ===== */
.theme-snow {
  --desktop-bg: #aaaaaa;
  --desktop-pattern:
    radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  --desktop-pattern-size: 12px 12px;
  --menubar-bg: #f8f8f8;
  --menubar-fg: #333333;
  --menubar-hover: rgba(0,0,0,0.1);
  --menubar-active: #666666;
  --menubar-active-fg: #ffffff;
  --window-bg: #ececec;
  --window-fg: #333333;
  --titlebar-bg: #d0d0d0;
  --titlebar-inactive-bg: #b8b8b8;
  --titlebar-fg: #333333;
  --content-bg: #ffffff;
  --content-fg: #333333;
  --border-color: #888888;
  --close-box-bg: #ffffff;
  --close-box-border: #888888;
  --dropdown-bg: #f0f0f0;
  --dropdown-hover: #666666;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.2);
  --footer-fg: rgba(255,255,255,0.5);
  --accent: #999999;
  --theme-swatch: linear-gradient(135deg, #f0f0f0 50%, #aaaaaa 50%);
}

/* ===== BLUE DALMATIAN (iMac G3 — February 2001) ===== */
.theme-dalmatian {
  --desktop-bg: #2a3a6a;
  --desktop-pattern:
    radial-gradient(circle, rgba(42,127,255,0.12) 2px, transparent 2px),
    radial-gradient(circle, rgba(170,170,255,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 16px 16px, 8px 8px;
  --menubar-bg: #c8d8f8;
  --menubar-fg: #2a3a6a;
  --menubar-hover: rgba(42,127,255,0.2);
  --menubar-active: #2a7fff;
  --menubar-active-fg: #ffffff;
  --window-bg: #b0c8f0;
  --window-fg: #2a3a6a;
  --titlebar-bg: #5588ff;
  --titlebar-inactive-bg: #3366cc;
  --titlebar-fg: #ffffff;
  --content-bg: #e8f0ff;
  --content-fg: #2a3a6a;
  --border-color: #2a5aaa;
  --close-box-bg: #e8f0ff;
  --close-box-border: #2a5aaa;
  --dropdown-bg: #c8d8f8;
  --dropdown-hover: #2a7fff;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.4);
  --footer-fg: rgba(85,136,255,0.6);
  --accent: #3366cc;
  --theme-swatch: linear-gradient(135deg, #2a7fff 50%, #aaaaff 50%);
}

/* ===== FLOWER POWER (iMac G3 — February 2001) ===== */
.theme-flowerpower {
  --desktop-bg: #8a5a7a;
  --desktop-pattern:
    radial-gradient(circle, rgba(255,138,204,0.1) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,170,221,0.08) 1px, transparent 1px);
  --desktop-pattern-size: 18px 18px, 10px 10px;
  --menubar-bg: #f8d8ee;
  --menubar-fg: #8a5a7a;
  --menubar-hover: rgba(255,138,204,0.2);
  --menubar-active: #ff8acc;
  --menubar-active-fg: #ffffff;
  --window-bg: #f0c0e0;
  --window-fg: #8a5a7a;
  --titlebar-bg: #ff8acc;
  --titlebar-inactive-bg: #cc6aaa;
  --titlebar-fg: #ffffff;
  --content-bg: #fff0f8;
  --content-fg: #8a5a7a;
  --border-color: #aa5a8a;
  --close-box-bg: #fff0f8;
  --close-box-border: #aa5a8a;
  --dropdown-bg: #f8d8ee;
  --dropdown-hover: #ff8acc;
  --dropdown-hover-fg: #ffffff;
  --footer-bg: rgba(0,0,0,0.3);
  --footer-fg: rgba(255,138,204,0.6);
  --accent: #ff6abb;
  --theme-swatch: linear-gradient(135deg, #ff8acc 50%, #ffaadd 50%);
}

/* ===== TERMINAL (Green-on-black hacker) ===== */
.theme-terminal {
  --desktop-bg: #000000;
  --desktop-pattern:
    repeating-linear-gradient(0deg,
      rgba(0,255,0,0.02) 0px, rgba(0,255,0,0.02) 1px,
      transparent 1px, transparent 3px);
  --menubar-bg: #003300;
  --menubar-fg: #00ff00;
  --menubar-hover: rgba(0,255,0,0.2);
  --menubar-active: #00ff00;
  --menubar-active-fg: #000000;
  --window-bg: #001100;
  --window-fg: #00ff00;
  --titlebar-bg: #004400;
  --titlebar-inactive-bg: #002200;
  --titlebar-fg: #00ff00;
  --content-bg: #000000;
  --content-fg: #00ff00;
  --border-color: #006600;
  --close-box-bg: #000000;
  --close-box-border: #006600;
  --dropdown-bg: #001100;
  --dropdown-hover: #00ff00;
  --dropdown-hover-fg: #000000;
  --footer-bg: rgba(0,0,0,0.7);
  --footer-fg: rgba(0,255,0,0.5);
  --accent: #00ff00;
  --theme-swatch: linear-gradient(135deg, #00ff00 50%, #000000 50%);
}

/* ===== Apply CSS variables to elements ===== */
.menu-bar {
  background: var(--menubar-bg);
  color: var(--menubar-fg);
}

.menu-item:hover {
  background: var(--menubar-hover);
}

.menu-item.active {
  background: var(--menubar-active);
  color: var(--menubar-active-fg);
}

.dropdown {
  background: var(--dropdown-bg);
  color: var(--window-fg);
}

.dropdown-item:hover {
  background: var(--dropdown-hover);
  color: var(--dropdown-hover-fg);
}

.desktop {
  background: var(--desktop-bg);
  background-image: var(--desktop-pattern);
  background-size: var(--desktop-pattern-size, auto);
}

.os9-window {
  background: var(--window-bg);
  color: var(--window-fg);
  border-color: var(--border-color);
}

.os9-titlebar {
  background: var(--titlebar-bg);
  color: var(--titlebar-fg);
}

.os9-window.inactive .os9-titlebar {
  background: var(--titlebar-inactive-bg);
}

.os9-close-box {
  background: var(--close-box-bg);
  border-color: var(--close-box-border);
  color: var(--close-box-border);
}

.os9-zoom-box {
  background: var(--close-box-bg);
  border-color: var(--close-box-border);
}

.os9-window-content {
  background: var(--content-bg);
  color: var(--content-fg);
}

.theme-panel {
  background: var(--window-bg);
  color: var(--window-fg);
  border-color: var(--border-color);
}

.theme-panel-header {
  background: var(--titlebar-bg);
  color: var(--titlebar-fg);
  border-bottom-color: var(--border-color);
}

.theme-panel-close {
  background: var(--close-box-bg);
  border-color: var(--close-box-border);
  color: var(--close-box-border);
}

.bomb-dialog {
  background: var(--window-bg);
  color: var(--window-fg);
}

.bomb-button {
  background: var(--close-box-bg);
  color: var(--content-fg);
  border-color: var(--border-color);
}

.bomb-button:hover {
  background: var(--accent);
  color: #fff;
}

.desktop-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
}

/* CRT toggle button */
.crt-toggle.active {
  background: var(--accent);
  color: #fff;
}