/* base.css — design tokens + reset.
 *
 * Dark by default. Theme toggle flips body.theme-dark ↔ theme-light.
 * All component sizing/color uses tokens; never hardcode hex inside
 * components.css or view-specific styles. That's how the system stays
 * portable across future projects.
 */

:root {
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-lg:  15px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  /* Spacing scale (4px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* Radii */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  56px;

  /* Transitions */
  --t-fast: 120ms;
  --t-base: 200ms;
}

/* ─────────────────────────── Dark (default) ─────────────────────────── */
body.theme-dark {
  --bg:           #0b0d11;
  --bg-elev-1:    #14171c;
  --bg-elev-2:    #1a1e25;
  --bg-elev-3:    #20252d;
  --line:         #22272e;
  --line-soft:    #1c2026;
  --fg:           #c9d1d9;
  --fg-dim:       #768390;
  --fg-faint:     #4a525c;
  --accent:       #4f93e9;
  --accent-soft:  #1a2438;
  --ok:           #57ab5a;
  --warn:         #c69026;
  --bad:          #f47067;
  --code-bg:      #11141a;
  --shadow:       0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.6);
  --scrim:        rgba(0,0,0,0.6);
}

/* ─────────────────────────── Light ─────────────────────────── */
body.theme-light {
  --bg:           #f6f7f9;
  --bg-elev-1:    #ffffff;
  --bg-elev-2:    #f0f2f5;
  --bg-elev-3:    #e6e9ee;
  --line:         #d9dde3;
  --line-soft:    #e6e9ee;
  --fg:           #1c1f23;
  --fg-dim:       #5c6470;
  --fg-faint:     #9aa3ad;
  --accent:       #2c5cc5;
  --accent-soft:  #e4ecf9;
  --ok:           #1a7a3a;
  --warn:         #b85c00;
  --bad:          #b32d2e;
  --code-bg:      #eef0f3;
  --shadow:       0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.15);
  --scrim:        rgba(0,0,0,0.35);
}

/* ─────────────────────────── Reset ─────────────────────────── */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

input, textarea, select {
  font: inherit;
  color: inherit;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 10px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
code {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  color: var(--fg);
}

/* Utility classes used freely from components/views */
.muted { color: var(--fg-dim); font-size: var(--fs-sm); }
.dim   { color: var(--fg-faint); }
.row   { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.col   { display: flex; flex-direction: column; gap: var(--sp-2); }
.grow  { flex: 1 1 auto; }
.right { margin-left: auto; }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-lg { font-size: var(--fs-lg); }

/* Accessibility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}