/* StitchDB design tokens (01-design-system.md §1). Light default; dark via :root[data-theme="dark"]. */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #FFFFFF;
  --bg-2: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F1F3F6;
  --border: #E3E6EB;
  --border-strong: #C8CED8;
  /* text */
  --text: #151A21;
  --text-2: #3C4651;
  --muted: #57636F;
  --faint: #636F7B; /* 4.5:1+ on --bg and --bg-2 */
  --inverse: #FFFFFF;
  /* brand accent */
  --accent: #047857;
  --accent-hover: #065F46;
  --accent-active: #064E3B;
  --accent-text: #047857;
  --accent-soft: #ECFDF5;
  --accent-border: #A7F3D0;
  --accent-bright: #3ECF8E;
  --on-accent: #FFFFFF;
  /* semantic */
  --info: #1D4ED8;      --info-soft: #EFF6FF;   --info-border: #BFDBFE;
  --success: #047857;   --success-soft: #ECFDF5;--success-border: #A7F3D0;
  --warn: #B45309;      --warn-soft: #FFFBEB;   --warn-border: #FDE68A;
  --danger: #B91C1C;    --danger-soft: #FEF2F2; --danger-border: #FECACA;
  --focus: #2563EB;
  /* code block (always dark) */
  --code-bg: #0F1115; --code-head: #161A22; --code-border: #262B36; --code-text: #E6E9EF;
  --tok-k: #C792EA; --tok-s: #A5E844; --tok-c: #7A838F; --tok-f: #82AAFF; --tok-n: #F78C6C;
  /* charts */
  --series-1: #2563EB; --series-2: #047857; --meter: #2563EB;
  --overlay: rgba(17, 24, 39, .48);

  /* type */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  /* layout */
  --container: 1280px; --prose: 760px; --gutter: 24px;
  /* radii, shadows, motion */
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16,24,40,.06);
  --sh-2: 0 4px 12px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --sh-3: 0 16px 40px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.06);
  --ease: cubic-bezier(.2,.8,.2,1); --dur-1: 120ms; --dur-2: 200ms;
  /* z-index */
  --z-sticky: 20; --z-dropdown: 30; --z-drawer: 40; --z-modal: 50; --z-toast: 60;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0A; --bg-2: #0F0F0F; --surface: #121212; --surface-2: #1A1A1A;
  --border: #242424; --border-strong: #343434;
  --text: #EDEDED; --text-2: #C9C9C9; --muted: #A1A1A1; --faint: #8F8F8F; --inverse: #0A0A0A;
  --code-bg: #0C0C0C; --code-head: #141414; --code-border: #262626;
  --accent: #3ECF8E; --accent-hover: #5BDBA2; --accent-active: #2FB97C;
  --accent-text: #4ADE9A;
  --accent-soft: rgba(62,207,142,.10); --accent-border: rgba(62,207,142,.35); --on-accent: #06281B;
  --info: #60A5FA; --info-soft: rgba(96,165,250,.10); --info-border: rgba(96,165,250,.35);
  --success: #4ADE9A; --success-soft: rgba(74,222,154,.10); --success-border: rgba(74,222,154,.35);
  --warn: #FBBF24; --warn-soft: rgba(251,191,36,.10); --warn-border: rgba(251,191,36,.35);
  --danger: #F87171; --danger-soft: rgba(248,113,113,.10); --danger-border: rgba(248,113,113,.35);
  --focus: #60A5FA;
  --series-1: #60A5FA; --series-2: #3ECF8E; --meter: #60A5FA;
  --overlay: rgba(0,0,0,.6);
  --sh-2: 0 4px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --sh-3: 0 16px 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
@media (max-width: 768px) { :root { --gutter: 16px; } }

/* base reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block}
h1,h2,h3,h4,h5,h6{margin:0}
h1,h2{text-wrap:balance}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:8px;top:-100px;z-index:100;background:var(--surface);padding:8px 12px;border:1px solid var(--border-strong);border-radius:6px}
.skip-link:focus{top:8px}
main:focus{outline:none}

/* type scale */
.t-display{font-size:clamp(40px,5.4vw,64px);line-height:1.04;font-weight:500;letter-spacing:-.035em}
.t-h1{font-size:44px;line-height:1.08;font-weight:500;letter-spacing:-.03em}
.t-h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;font-weight:500;letter-spacing:-.03em}
.t-h3{font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.t-h4{font-size:18px;line-height:1.3;font-weight:600}
.t-lead{font-size:18px;line-height:1.6;color:var(--muted)}
.t-body{font-size:16px;line-height:1.6}
.t-body-sm{font-size:14px;line-height:1.55}
.t-small{font-size:13px;line-height:1.5}
.t-caption{font-size:12px;line-height:1.4;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.t-eyebrow{font-size:12.5px;line-height:1.3;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:13px;line-height:1.6}
.muted{color:var(--muted)} .faint{color:var(--faint)}
@media (max-width: 768px) {
  .t-h1{font-size:30px} .t-h3{font-size:20px} .t-h4{font-size:17px} .t-lead{font-size:17px}
}

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