/* ═══════════════════════════════════════════════════
   PROMPT — Design System v3 (style.css)
   Structural tokens + base reset. Theme-agnostic.

   PUT HERE:  Spacing scale, border-radii, font stacks,
              motion/easing tokens, universal reset,
              body structural defaults (font-size, line-height).
   NOT HERE:  Colors, backgrounds, shadows, borders →
              light-colors.css / dark-colors.css.
              Component rules → components.css.
   RULE:      This file has ZERO color values. Every color
              is defined in light-colors.css (default) or
              dark-colors.css (override). If you need to
              add a new token, ask: "Is it a color?" If yes
              → light-colors.css. If no → here.
   ═══════════════════════════════════════════════════ */

/* Fonts are loaded via parallel <link rel="preconnect"> + <link rel="stylesheet"> in
   nav.html (and design_system.html) — NOT a render-blocking @import here, which would
   serialize: download style.css → parse → discover @import → fetch fonts. */

:root {
  /* ── Radii ── */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-btn: 6px;
  --radius-ctrl: 7px;
  --radius-full: 9999px;

  /* ── Spacing ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Font ── */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ── Glass (structural) ── */
  --glass-blur: blur(12px) saturate(140%);

  /* ── Motion ── */
  --ease-emphasis: cubic-bezier(.16,1,.3,1);
  --t-fast: 0.12s;
  --t-base: 0.15s;
  --t-slow: 0.18s;
  --t-panel: 0.25s;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
}

a { color: var(--text); text-decoration: none; }
a.sb-item:hover { opacity: 1; }
a:focus-visible { outline: none; }

code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* ═══ Layout ═══ */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-6);
}

@media (max-width: 768px) {
  .container { padding: var(--sp-4); }
}

/* ═══ Header (sticky, content aligned with .container via shared constraints) ═══ */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: var(--sp-5);
}

/* Full-width background + border via pseudo — avoids width-matching issues */
header::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: -1;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

header.scrolled::before {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border-bottom-color: transparent;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  /* Identical to .container — guarantees pixel-perfect alignment */
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}

header.scrolled .header-inner {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

header h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .header-inner {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}