/* ============================================================
   themes.css — Light / Dark / Neon Theme Variables & Transitions
   ============================================================ */

:root,
[data-theme="dark"] {
  /* ── Backgrounds ── */
  --bg-primary: #1c1c1e;
  --bg-secondary: #2c2c2e;
  --bg-tertiary: #3a3a3c;
  --bg-window: rgba(44, 44, 46, 0.92);
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-selected: rgba(10, 132, 255, 0.25);

  /* ── Foregrounds ── */
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #6e6e73;
  --text-inverse: #1c1c1e;

  /* ── Accent ── */
  --accent: #0a84ff;
  --accent-hover: #409cff;
  --accent-muted: rgba(10, 132, 255, 0.15);
  --accent-glow: rgba(10, 132, 255, 0.4);

  /* ── Semantic ── */
  --success: #30d158;
  --warning: #ffd60a;
  --danger: #ff453a;
  --info: #64d2ff;

  /* ── Borders & Shadows ── */
  --border-color: rgba(255, 255, 255, 0.12);
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 14px;
  --border-radius-xl: 18px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 50px rgba(0, 0, 0, 0.6);

  /* ── Scrollbar ── */
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --scrollbar-track: transparent;

  /* ── Window Chrome ── */
  --traffic-red: #ff5f57;
  --traffic-yellow: #febc2e;
  --traffic-green: #28c840;
  --titlebar-height: 38px;

  /* ── Desktop ── */
  --desktop-icon-size: 72px;
  --desktop-icon-label-color: #f5f5f7;
}

[data-theme="light"] {
  /* ── Backgrounds ── */
  --bg-primary: #f5f5f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8e8ed;
  --bg-window: rgba(255, 255, 255, 0.90);
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-selected: rgba(0, 122, 255, 0.15);

  /* ── Foregrounds ── */
  --text-primary: #1c1c1e;
  --text-secondary: #6e6e73;
  --text-tertiary: #a1a1a6;
  --text-inverse: #f5f5f7;

  /* ── Accent ── */
  --accent: #007aff;
  --accent-hover: #0a84ff;
  --accent-muted: rgba(0, 122, 255, 0.10);
  --accent-glow: rgba(0, 122, 255, 0.3);

  /* ── Semantic ── */
  --success: #34c759;
  --warning: #ff9500;
  --danger: #ff3b30;
  --info: #5ac8fa;

  /* ── Borders & Shadows ── */
  --border-color: rgba(0, 0, 0, 0.10);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 50px rgba(0, 0, 0, 0.15);

  /* ── Scrollbar ── */
  --scrollbar-thumb: rgba(0, 0, 0, 0.18);
  --scrollbar-track: transparent;

  /* ── Traffic lights (match macOS light) ── */
  --traffic-red: #ff5f57;
  --traffic-yellow: #febc2e;
  --traffic-green: #28c840;

  /* ── Desktop ── */
  --desktop-icon-label-color: #1c1c1e;
}

[data-theme="neon"] {
  /* ── Backgrounds ── */
  --bg-primary: #0a0a12;
  --bg-secondary: #12121e;
  --bg-tertiary: #1a1a2e;
  --bg-window: rgba(18, 18, 30, 0.94);
  --bg-hover: rgba(0, 255, 200, 0.08);
  --bg-selected: rgba(255, 0, 200, 0.20);

  /* ── Foregrounds ── */
  --text-primary: #e0f7fa;
  --text-secondary: #80cbc4;
  --text-tertiary: #4dd0e1;
  --text-inverse: #0a0a12;

  /* ── Accent ── */
  --accent: #00ffc8;
  --accent-hover: #33ffd6;
  --accent-muted: rgba(0, 255, 200, 0.12);
  --accent-glow: rgba(0, 255, 200, 0.5);

  /* ── Semantic (neon-tinted) ── */
  --success: #00ff88;
  --warning: #ffdd00;
  --danger: #ff3366;
  --info: #00ccff;

  /* ── Borders & Shadows ── */
  --border-color: rgba(0, 255, 200, 0.20);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 12px 50px rgba(0, 0, 0, 0.8);

  /* ── Scrollbar (neon) ── */
  --scrollbar-thumb: rgba(0, 255, 200, 0.25);
  --scrollbar-track: transparent;

  /* ── Traffic lights (slightly different neon hue) ── */
  --traffic-red: #ff3b6f;
  --traffic-yellow: #ffdd00;
  --traffic-green: #00ff88;

  /* ── Desktop ── */
  --desktop-icon-label-color: #e0f7fa;
}

/* ── Smooth Theme Transitions ── */
*,
*::before,
*::after {
  transition-property: background-color, color, border-color, box-shadow, text-shadow;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Utility Classes ── */
.theme-transition {
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}