/* ═══════════════════════════════════════════
   LIGHT THEME: Variables, reset, base elements
   ═══════════════════════════════════════════ */

  [data-theme="light"] {
    --bg: #f0ebe4;
    --bg2: #e7e1d8;
    --bg3: #dcd5ca;
    --grid: #c4b9ab;
    --accent: #8b3a00;
    --accent-dim: #7a5a30;
    --accent-glow: rgba(139,58,0,0.12);
    --amber: #b45309;
    --amber-dim: #7a5a30;
    --red: #be123c;
    --red-dim: #9e1840;
    --green: #15803d;
    --green-dim: #0f6b30;
    --white: #1c1917;
    --text: #1c1917;
    --dim: #44403c;
    --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    /* Glass & gloss — light theme overrides */
    --glass-bg: rgba(231,225,216,0.82);
    --glass-bg-heavy: rgba(240,235,228,0.9);
    --glass-border: rgba(139,58,0,0.1);
    --gloss-top: rgba(255,255,255,0.25);
    --gloss-bottom: rgba(0,0,0,0.08);
    /* Starbase/panel palette — light overrides */
    --sb-bg: #f0ebe4;
    --sb-surface: #e7e1d8;
    --sb-border: #c4b9ab;
    --sb-border-hover: #a89880;
    --sb-text: #1c1917;
    --sb-text-dim: #44403c;
    --sb-accent-warm: #8b3a00;
    --scrollbar-thumb: rgba(139,58,0,0.25);
    --scrollbar-track: transparent;
  }

  html[data-theme="light"] {
    background: #f0ebe4 !important;
  }

  [data-theme="light"] button {
    background: linear-gradient(180deg, #e7e1d8 0%, #dcd5ca 100%) !important;
    border: 1px solid #b8ad9e !important;
    color: var(--white) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5) !important;
    text-shadow: none !important;
  }

  [data-theme="light"] button:active {
    background: #d2cabe !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
  }

/* ── Auto-generated gap fills ── */

[data-theme="light"] .googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Orbitron:wght@400;700;900&family=VT323&display=swap');

  :root {
  border: rgba(139,58,0,0.08);
  border: var(--grid);
}
[data-theme="light"] .encounter-flee-btn,
  .confirm-yes,
  .diary-delete-btn {
  background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 50%, var(--bg2) 100%) !important;
  border-color: rgba(190,18,60,0.35) !important;
}
[data-theme="light"] .encounter-flee-btn:active,
  .confirm-yes:active,
  .diary-delete-btn:active {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg3) 100%) !important;
}
[data-theme="light"] .confirm-no,
  .trade-btn-back,
  .share-close-btn {
  box-shadow:
      inset 0 1px 0 rgba(0,0,0,0.04),
      inset 0 -1px 0 rgba(0,0,0,0.3),
      0 1px 4px rgba(0,0,0,0.4) !important;
}
[data-theme="light"] .event-choice-btn {
  box-shadow:
      inset 0 1px 0 rgba(0,0,0,0.03),
      0 2px 6px rgba(0,0,0,0.3) !important;
}
[data-theme="light"] .system-card {
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.25) !important;
}
[data-theme="light"] .event-card,
  .story-card,
  .cargo-item,
  .diary-entry,
  .module-reward-card,
  .event-narrative-section,
  .round-score-section,
  .encounter-summary-section,
  .trade-container {
  box-shadow:
      0 2px 8px rgba(0,0,0,0.2),
      inset 0 1px 0 rgba(0,0,0,0.03);
}

[data-theme="light"] .status-bar { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ===== LIGHT THEME: SHARED SHELL PARITY ===== */
[data-theme="light"] .shell-header,
[data-theme="light"] .shell-panel {
  border-color: #c9beb0;
  background: linear-gradient(180deg, #f7f2eb 0%, #ece4d9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 14px 30px rgba(0,0,0,0.06);
}

[data-theme="light"] .shell-header::after {
  background: linear-gradient(135deg, rgba(139,58,0,0.06) 0%, transparent 48%, transparent 100%);
}

[data-theme="light"] .shell-metric {
  border-color: #c9beb0;
  background: linear-gradient(180deg, #faf6f0 0%, #eee6dd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 10px 22px rgba(0,0,0,0.05);
}

[data-theme="light"] .shell-kicker,
[data-theme="light"] .shell-panel-title,
[data-theme="light"] .shell-metric-label {
  color: #7a5a30;
}

[data-theme="light"] .shell-title,
[data-theme="light"] .shell-metric-value {
  color: var(--text);
}

[data-theme="light"] .shell-subtitle,
[data-theme="light"] .shell-panel-copy,
[data-theme="light"] .shell-metric-copy {
  color: var(--dim);
}