/* ============================================================
   vars.css  —  Design tokens, color schemes, reset, base
   ============================================================ */

/* ── Layout & typography tokens (scheme-independent) ────── */
:root {
  --sidebar-w:   280px;
  --header-h:     56px;
  --topnav-h:     40px;
  --top-h:       calc(var(--header-h) + var(--topnav-h));
  --content-max:  820px;
  --toc-w:        216px;

  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur:   150ms;
  --dur2:  240ms;

  --r:   6px;
  --r2: 10px;
  --r3: 14px;

  /* Raw palette (used in admonitions + highlight) */
  --d-green:  #50fa7b;
  --d-cyan:   #8be9fd;
  --d-purple: #bd93f9;
  --d-pink:   #ff79c6;
  --d-orange: #ffb86c;
  --d-red:    #ff5555;
  --d-yellow: #f1fa8c;
  --d-fg:     #f8f8f2;
}

/* ── DARK scheme (default when data-scheme="dark") ──────── */
/* IMPORTANT: these come BEFORE :root color fallback so they
   take effect correctly regardless of specificity order.      */
[data-scheme="dark"] {
  --bg:      #282a36;
  --bg2:     #21222c;
  --bg3:     #191a21;
  --surface: #44475a;
  --border:  #44475a;
  --fg:      #f8f8f2;
  --fg2:     #6272a4;
  --fg3:     rgba(248,248,242,.3);
  --shadow:  0 4px 24px rgba(0,0,0,.45);
}

/* ── LIGHT scheme ────────────────────────────────────────── */
[data-scheme="light"] {
  --bg:      #f5f5ef;
  --bg2:     #eaeae3;
  --bg3:     #e0e0d8;
  --surface: #d2d2ca;
  --border:  #c4c4bc;
  --fg:      #282a36;
  --fg2:     #5a6380;
  --fg3:     rgba(40,42,54,.25);
  --shadow:  0 4px 24px rgba(0,0,0,.12);
}

/* ── Accent: dark ────────────────────────────────────────── */
[data-scheme="dark"][data-accent="purple"] { --accent: #bd93f9; --on-accent: #1e1f2b; }
[data-scheme="dark"][data-accent="green"]  { --accent: #50fa7b; --on-accent: #1e1f2b; }
[data-scheme="dark"][data-accent="cyan"]   { --accent: #8be9fd; --on-accent: #1e1f2b; }
[data-scheme="dark"][data-accent="pink"]   { --accent: #ff79c6; --on-accent: #1e1f2b; }
[data-scheme="dark"][data-accent="orange"] { --accent: #ffb86c; --on-accent: #1e1f2b; }
[data-scheme="dark"][data-accent="red"]    { --accent: #ff5555; --on-accent: #f8f8f2; }

/* ── Accent: light ───────────────────────────────────────── */
[data-scheme="light"][data-accent="purple"] { --accent: #6d28d9; --on-accent: #fff; }
[data-scheme="light"][data-accent="green"]  { --accent: #15803d; --on-accent: #fff; }
[data-scheme="light"][data-accent="cyan"]   { --accent: #0369a1; --on-accent: #fff; }
[data-scheme="light"][data-accent="pink"]   { --accent: #be185d; --on-accent: #fff; }
[data-scheme="light"][data-accent="orange"] { --accent: #c2410c; --on-accent: #fff; }
[data-scheme="light"][data-accent="red"]    { --accent: #b91c1c; --on-accent: #fff; }

/* ── Fallback for initial render (before data-scheme is set) ─
   MUST come AFTER the [data-scheme] rules above so it only
   fills gaps — it does NOT override them (same specificity as
   :root, but lower specificity than [data-scheme="..."]       */
:root:not([data-scheme]) {
  --bg:      #282a36;
  --bg2:     #21222c;
  --bg3:     #191a21;
  --surface: #44475a;
  --border:  #44475a;
  --fg:      #f8f8f2;
  --fg2:     #6272a4;
  --fg3:     rgba(248,248,242,.3);
  --shadow:  0 4px 24px rgba(0,0,0,.45);
  --accent:  #bd93f9;
  --on-accent: #1e1f2b;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur2) var(--ease), color var(--dur2) var(--ease);
}
a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { filter: brightness(1.1); }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: var(--font); }

/* ── Top-level layout ────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.main-wrapper {
  margin-left: var(--sidebar-w);
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; min-height: 100vh;
}

@media (max-width: 768px) {
  .main-wrapper { margin-left: 0; }
}