/* ==========================================================================
   base.css — reset, design tokens, base element styling
   Load order: base.css -> layout.css -> components.css -> utilities.css
   ========================================================================== */

/* ---------- Design tokens (light theme = default) ---------- */
:root {
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F8FAFC;
  --color-bg-code: #0F172A;
  --color-text: #0F172A;
  --color-text-muted: #475569;
  --color-border: #E2E8F0;

  --color-primary: #1E3A8A;
  --color-primary-hover: #1E40AF;
  --color-accent: #F59E0B;
  --color-accent-hover: #D97706;

  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-info: #0284C7;

  --color-code-text: #E2E8F0;

  /* Typography */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  /* Spacing (4px base unit) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --container-max: 1200px;
  --prose-max: 65ch;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --header-height: 64px;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-panel: 280ms ease;
}

/* Dark theme: system preference (only when user hasn't explicitly chosen light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0B1220;
    --color-bg-subtle: #111A2E;
    --color-bg-code: #0A0F1C;
    --color-text: #E2E8F0;
    --color-text-muted: #94A3B8;
    --color-border: #1E293B;

    --color-primary: #60A5FA;
    --color-primary-hover: #93C5FD;
    --color-accent: #FBBF24;
    --color-accent-hover: #FCD34D;
  }
}

/* Dark theme: explicit user choice via theme toggle (wins in both directions) */
:root[data-theme="dark"] {
  --color-bg: #0B1220;
  --color-bg-subtle: #111A2E;
  --color-bg-code: #0A0F1C;
  --color-text: #E2E8F0;
  --color-text-muted: #94A3B8;
  --color-border: #1E293B;

  --color-primary: #60A5FA;
  --color-primary-hover: #93C5FD;
  --color-accent: #FBBF24;
  --color-accent-hover: #FCD34D;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  transition: background-color var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
}
h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--color-text); }
.text-muted, .meta { color: var(--color-text-muted); }

a.link,
.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 2px;
}
a.link:hover,
.prose a:hover { color: var(--color-primary-hover); }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
:not(pre) > code {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

/* ---------- Accessibility: focus & skip link ---------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--transition-base);
}
.skip-link:focus { top: var(--space-4); }