/* ============================================================
   theme.css — light theme + theme toggle
   Code/terminal surfaces intentionally stay dark (like an editor).
   ============================================================ */

/* ---- Toggle button ---- */
.theme-toggle {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.theme-toggle:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); border-color: var(--border-focus); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
body.theme-light .theme-toggle .icon-moon { display: none; }
body.theme-light .theme-toggle .icon-sun { display: block; }
body.theme-light .theme-toggle { background: rgba(20, 16, 10, 0.04); }
body.theme-light .theme-toggle:hover { background: rgba(20, 16, 10, 0.07); }

/* prevent a dark→light flash by transitioning the shell */
body, .sidebar, .top-header, .bento-card, .table-container, table, td, th,
.search-input, .nav-link, .key, .timeline-node, .builder-group, .stat-item {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
body.theme-light {
  --bg-dark: #f1efe9;
  --bg-panel: #f9f7f2;
  --bg-card: #ffffff;
  --bg-card-hover: #f6f3ed;
  --border-color: rgba(28, 22, 14, 0.10);
  --border-focus: rgba(217, 102, 63, 0.5);
  --accent-peach: #c25a34;      /* darkened for contrast on light */
  --accent-peach-rgb: 194, 90, 52;
  --text-primary: #1c1a16;
  --text-secondary: #5b554b;
  --text-muted: #948d80;
}

/* scrollbar */
body.theme-light ::-webkit-scrollbar-thumb { background: rgba(28, 22, 14, 0.18); }
body.theme-light ::-webkit-scrollbar-thumb:hover { background: var(--accent-peach); }

/* logo + brand */
body.theme-light .logo-container {
  background: #fff;
  border-color: rgba(28, 22, 14, 0.14);
  box-shadow: 0 2px 6px rgba(28, 22, 14, 0.08);
}

/* nav */
body.theme-light .nav-link:hover { background: rgba(28, 22, 14, 0.05); }
body.theme-light .nav-link.active { background: rgba(28, 22, 14, 0.05); }

/* progress card */
body.theme-light .progress-card { background: rgba(28, 22, 14, 0.025); }
body.theme-light .progress-bar-container { background: rgba(28, 22, 14, 0.08); }

/* header / search */
body.theme-light .top-header { background-color: rgba(249, 247, 242, 0.85); }
body.theme-light .search-input { background: rgba(28, 22, 14, 0.04); }
body.theme-light .search-input:focus { background: rgba(28, 22, 14, 0.06); box-shadow: 0 0 10px rgba(194, 90, 52, 0.12); }
body.theme-light .search-shortcut { background: rgba(28, 22, 14, 0.07); border-color: rgba(28, 22, 14, 0.12); }

/* cards + shadows */
body.theme-light .bento-card { box-shadow: 0 1px 3px rgba(28, 22, 14, 0.05); }
body.theme-light .bento-card:hover { box-shadow: 0 10px 30px rgba(28, 22, 14, 0.10); border-color: var(--accent-peach); }
body.theme-light .hero-card { box-shadow: 0 6px 24px rgba(28, 22, 14, 0.08); }
body.theme-light .stat-item { background: rgba(28, 22, 14, 0.02); }
body.theme-light .card-icon { background: rgba(28, 22, 14, 0.03); }
body.theme-light .bento-card:hover .card-icon { background: rgba(194, 90, 52, 0.1); border-color: rgba(194, 90, 52, 0.25); }

/* tables */
body.theme-light .table-container { background: rgba(28, 22, 14, 0.015); }
body.theme-light th { background-color: rgba(28, 22, 14, 0.03); }
body.theme-light tr:hover td { background-color: rgba(28, 22, 14, 0.025); }

/* inline code (NOT inside dark <pre>) */
body.theme-light code { background: rgba(28, 22, 14, 0.06); }
body.theme-light pre code { background: none; }

/* keep terminal/code blocks dark, but fix the translucent header strip */
body.theme-light .terminal-header {
  background: #16161a;
  color: #8a8f98;
  border-color: rgba(255, 255, 255, 0.08);
}

/* keyboard */
body.theme-light .keyboard-grid { background: rgba(28, 22, 14, 0.02); }
body.theme-light .key {
  background: #fff;
  border-color: rgba(28, 22, 14, 0.14);
  box-shadow: 0 2px 4px rgba(28, 22, 14, 0.1);
}
body.theme-light .key:hover { border-color: var(--accent-peach); box-shadow: 0 0 12px rgba(194, 90, 52, 0.18); }
body.theme-light .key.selected { color: #fff; }

/* timeline nodes */
body.theme-light .timeline-node { box-shadow: 0 1px 3px rgba(28, 22, 14, 0.05); }
body.theme-light .timeline-node.active { background: rgba(16, 185, 129, 0.08); }

/* builders / studio inputs */
body.theme-light .builder-group { background: rgba(28, 22, 14, 0.015); }
body.theme-light .builder-option-card { background: rgba(28, 22, 14, 0.02); }
body.theme-light .builder-option-card:hover { background: rgba(28, 22, 14, 0.04); }
body.theme-light .builder-option-card.selected { background: rgba(194, 90, 52, 0.06); }
body.theme-light .builder-input-text { background: rgba(28, 22, 14, 0.03); }
body.theme-light .builder-input-text:focus { border-color: var(--accent-peach); }

/* OS tabs (quickstart) */
body.theme-light .os-tab { color: var(--text-secondary); }

/* primary button: invert to dark-on-light so it reads as primary */
body.theme-light .btn-primary {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #fff;
}
body.theme-light .btn-primary:hover { background: #322d25; border-color: #322d25; box-shadow: 0 4px 12px rgba(28, 22, 14, 0.18); }

/* secondary/reset buttons commonly used as ghost buttons */
body.theme-light .checklist-reset-btn {
  background: rgba(28, 22, 14, 0.04);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
body.theme-light .checklist-reset-btn:hover { background: rgba(28, 22, 14, 0.08); color: var(--text-primary); }

/* checklist items */
body.theme-light .checklist-section { background: rgba(28, 22, 14, 0.015); }
body.theme-light .checklist-item { background: rgba(28, 22, 14, 0.02); }
body.theme-light .checklist-item:hover { background: rgba(28, 22, 14, 0.04); }

/* demo-trigger dashed underline reads fine with darkened peach var.
   The overlay modal + hero terminal stay dark on purpose. */