@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Font stacks (base defaults) ──────────────────────────────────────────── */

:root {
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif:   "Source Serif 4", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-serif);

  /* Shape */
  --radius:            6px;
  --radius-sm:         4px;
  --border-w:          1px;

  /* Density */
  --pad-y:             10px;
  --gap:               3px;

  /* Voice */
  --title-size:        30px;
  --title-weight:      500;
  --title-spacing:     -0.015em;
  --label-transform:   uppercase;
  --label-spacing:     0.12em;
  --row-title-weight:  600;
  --row-title-family:  var(--font-sans);
}

/* ── Classic (renamed from theme-light; the historical default) ──────────── */

html,
html.theme-classic {
  --bg:           #fbfaf7;
  --bg-elev:      #ffffff;
  --bg-sunken:    #f4f2ec;
  --bg-hover:     rgba(0, 0, 0, 0.03);
  --bg-active:    rgba(0, 0, 0, 0.05);
  --border:       rgba(20, 15, 10, 0.08);
  --border-strong:rgba(20, 15, 10, 0.14);
  --fg:           #1a1714;
  --fg-muted:     #5a544c;
  --fg-subtle:    #8a847b;
  --accent:       oklch(55% 0.12 35);
  --accent-soft:  oklch(95% 0.025 35);
  --link:         oklch(45% 0.12 250);
  color-scheme: light;
}

/* ── Vivid (new default) — bold grotesk, electric violet, hard shadows ──── */

html.theme-vivid {
  --bg:           #ffffff;
  --bg-elev:      #ffffff;
  --bg-sunken:    #f1f0f5;
  --bg-hover:     rgba(20, 16, 30, 0.04);
  --bg-active:    rgba(20, 16, 30, 0.07);
  --border:       rgba(20, 16, 30, 0.14);
  --border-strong:rgba(20, 16, 30, 0.5);
  --fg:           #141021;
  --fg-muted:     #55505e;
  --fg-subtle:    #908b99;
  --accent:       #5025e0;
  --accent-soft:  #ebe5ff;
  --link:         #5025e0;

  --font-sans:    "Space Grotesk", system-ui, sans-serif;
  --font-serif:   "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
  --font-display: "Space Grotesk", system-ui, sans-serif;

  --radius:            10px;
  --radius-sm:         7px;
  --border-w:          1px;

  --pad-y:             13px;
  --gap:               4px;

  --title-size:        30px;
  --title-weight:      700;
  --title-spacing:     -0.025em;
  --label-transform:   uppercase;
  --label-spacing:     0.08em;
  --row-title-weight:  700;
  --row-title-family:  var(--font-display);

  color-scheme: light;
}

/* ── Nordic — cool slate, humanist sans, rounded, airy ──────────────────── */

html.theme-nordic {
  --bg:           #f3f6f9;
  --bg-elev:      #ffffff;
  --bg-sunken:    #e9eef3;
  --bg-hover:     rgba(40, 60, 80, 0.04);
  --bg-active:    rgba(40, 60, 80, 0.07);
  --border:       rgba(40, 60, 80, 0.09);
  --border-strong:rgba(40, 60, 80, 0.16);
  --fg:           #1f2933;
  --fg-muted:     #5b6b7b;
  --fg-subtle:    #94a3b3;
  --accent:       #4f7fb0;
  --accent-soft:  #e4edf5;
  --link:         #4f7fb0;

  --font-sans:    "Manrope", system-ui, sans-serif;
  --font-serif:   "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Manrope", system-ui, sans-serif;

  --radius:            14px;
  --radius-sm:         9px;
  --border-w:          1px;

  --pad-y:             15px;
  --gap:               5px;

  --title-size:        28px;
  --title-weight:      800;
  --title-spacing:     -0.02em;
  --label-transform:   none;
  --label-spacing:     0.01em;
  --row-title-weight:  700;
  --row-title-family:  var(--font-sans);

  color-scheme: light;
}

/* ── Dark theme ───────────────────────────────────────────────────────────── */

html.theme-dark {
  --bg:           #131210;
  --bg-elev:      #1c1a17;
  --bg-sunken:    #0d0c0a;
  --bg-hover:     rgba(255, 255, 255, 0.04);
  --bg-active:    rgba(255, 255, 255, 0.06);
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.14);
  --fg:           #e8e4dd;
  --fg-muted:     #a39e94;
  --fg-subtle:    #6e6a62;
  --accent:       oklch(72% 0.12 35);
  --accent-soft:  oklch(28% 0.04 35);
  --link:         oklch(78% 0.12 250);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
  padding: 0 !important; /* override Bootstrap body padding from fixed-top */
  height: 100dvh;
  overflow: hidden;
}

/* ── Shared utilities ─────────────────────────────────────────────────────── */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scroll-area {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.scroll-area::-webkit-scrollbar        { width: 8px; }
.scroll-area::-webkit-scrollbar-thumb  { background: var(--border-strong); border-radius: var(--radius-sm); }
.scroll-area::-webkit-scrollbar-track  { background: transparent; }

/* ── Theme-scoped flourishes ──────────────────────────────────────────────── */

/* Nordic: soft elevation instead of hard borders on raised controls */
html.theme-nordic .list-title-tag,
html.theme-nordic .list-search {
  box-shadow: 0 1px 2px rgba(40, 60, 80, 0.06);
}
html.theme-nordic .dash-stat {
  box-shadow: 0 2px 8px rgba(40, 60, 80, 0.05);
  border-color: transparent;
}