/* ─── base.css ───────────────────────────────────────────────
   Design tokens, reset, and body layout.
   All color/font/spacing values live here. Never hardcode elsewhere.
   ─────────────────────────────────────────────────────────── */

:root {
  /* Colors */
  --bg-shell:    #0d0d14;
  --bg-notebook: #1e1e2e;
  --bg-topbar:   #181825;
  --bg-code:     #11111b;
  --bg-output:   #181825;
  --border:      #313244;

  --text-primary: #cdd6f4;
  --text-dim:     #7f849c;
  --text-muted:   #585b70;
  --text-secondary: #bac2de;

  --accent: #f37626;
  --green:  #a6e3a1;

  /* Syntax highlighting */
  --syn-kw:  #f38ba8;
  --syn-str: #a6e3a1;
  --syn-fn:  #89b4fa;
  --syn-num: #fab387;
  --syn-cm:  #585b70;

  /* Typography */
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-ui:    system-ui, -apple-system, sans-serif;

  /* Spacing (4px base unit) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body — centers the notebook on the page */
html { scroll-behavior: smooth; }

body {
  background: var(--bg-shell);
  color: var(--text-primary);
  font-family: var(--font-ui);
  min-height: 100vh;
}

/* Typography scale */
h1 { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); }
h2 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text-secondary); }

p  { font-family: var(--font-serif); font-size: 13px; line-height: 1.75; color: var(--text-dim); }

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

/* Keyboard focus ring — visible for all interactive elements */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}