/* ── Dark mode (default / system dark) ─────────────────────── */
:root {
  color-scheme: dark;

  /* Base palette */
  --bg: #0a0a0a;
  --panel: #141414;
  --panel-2: #1e1e1e;
  --line: #2a2a2a;
  --text: #f0f0f0;
  --muted: #7a7a7a;
  --accent: #e61b23;
  --accent-2: #f5c518;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.6);

  /* Extended semantic tokens */
  --text-2: #9aabb8;
  --panel-alt: #1a1a1a;
  --hover-bg: #1c1c1c;
  --panel-deep: #111111;
  --topbar-bg: rgba(10, 10, 10, 0.95);
  --pill-bg: rgba(20, 20, 20, 0.96);
  --border-inner: #252525;
  --border-hover: #3d3d3d;
  --accent-tint: rgba(230, 27, 35, 0.12);
  --accent-glow: rgba(230, 27, 35, 0.18);
  --accent-border: rgba(230, 27, 35, 0.35);
  --accent-outline: rgba(230, 27, 35, 0.4);
  --accent-text: #e0a0a0;
  --img-bg: #0f0f0f;
  --calendar-empty: #0d0d0d;
  --disabled: #4a4a4a;
}

/* ── Light mode (system light) ──────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #f6f7f9;
    --panel: #ffffff;
    --panel-2: #eef3f8;
    --line: #d9dee7;
    --text: #111111;
    --muted: #666677;
    --accent: #e61b23;
    --accent-2: #c49000;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

    --text-2: #445566;
    --panel-alt: #f2f3f6;
    --hover-bg: #ebebed;
    --panel-deep: #f5f6f8;
    --topbar-bg: rgba(246, 247, 249, 0.95);
    --pill-bg: rgba(255, 255, 255, 0.94);
    --border-inner: #d5dae4;
    --border-hover: #b0b8c4;
    --accent-tint: rgba(230, 27, 35, 0.07);
    --accent-glow: rgba(230, 27, 35, 0.14);
    --accent-border: rgba(230, 27, 35, 0.25);
    --accent-outline: rgba(230, 27, 35, 0.3);
    --accent-text: #cc2020;
    --img-bg: #e5eaf0;
    --calendar-empty: #f1f4f8;
    --disabled: #aaaaaa;
  }
}

/* ── Forced dark (overrides system preference) ───────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --panel: #141414;
  --panel-2: #1e1e1e;
  --line: #2a2a2a;
  --text: #f0f0f0;
  --muted: #7a7a7a;
  --accent: #e61b23;
  --accent-2: #f5c518;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  --text-2: #9aabb8;
  --panel-alt: #1a1a1a;
  --hover-bg: #1c1c1c;
  --panel-deep: #111111;
  --topbar-bg: rgba(10, 10, 10, 0.95);
  --pill-bg: rgba(20, 20, 20, 0.96);
  --border-inner: #252525;
  --border-hover: #3d3d3d;
  --accent-tint: rgba(230, 27, 35, 0.12);
  --accent-glow: rgba(230, 27, 35, 0.18);
  --accent-border: rgba(230, 27, 35, 0.35);
  --accent-outline: rgba(230, 27, 35, 0.4);
  --accent-text: #e0a0a0;
  --img-bg: #0f0f0f;
  --calendar-empty: #0d0d0d;
  --disabled: #4a4a4a;
}

/* ── Forced light (overrides system preference) ──────────────── */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #eef3f8;
  --line: #d9dee7;
  --text: #111111;
  --muted: #666677;
  --accent: #e61b23;
  --accent-2: #c49000;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  --text-2: #445566;
  --panel-alt: #f2f3f6;
  --hover-bg: #ebebed;
  --panel-deep: #f5f6f8;
  --topbar-bg: rgba(246, 247, 249, 0.95);
  --pill-bg: rgba(255, 255, 255, 0.94);
  --border-inner: #d5dae4;
  --border-hover: #b0b8c4;
  --accent-tint: rgba(230, 27, 35, 0.07);
  --accent-glow: rgba(230, 27, 35, 0.14);
  --accent-border: rgba(230, 27, 35, 0.25);
  --accent-outline: rgba(230, 27, 35, 0.3);
  --accent-text: #cc2020;
  --img-bg: #e5eaf0;
  --calendar-empty: #f1f4f8;
  --disabled: #aaaaaa;
}

/* ── Shared scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }