/* ============================================================
   Agent Engineering — Design Tokens (Stripe/Geist direction)
   Inter + JetBrains Mono · near-monochrome · borders > glow
   ============================================================ */

:root {
  /* Surfaces */
  --bg-0: #FFFFFF;
  --bg-1: #FAFAFA;
  --bg-2: #F4F4F5;
  --bg-3: #EDEDEF;

  --bg-inv-0: #0A0A0A;
  --bg-inv-1: #141416;
  --bg-inv-2: #1F1F22;

  /* Foreground */
  --fg-0: #0A0A0A;
  --fg-1: #171717;
  --fg-2: #404046;
  --fg-3: #71717A;
  --fg-4: #A1A1AA;
  --fg-5: #D4D4D8;

  --fg-on-dark-0: #FAFAFA;
  --fg-on-dark-1: #E4E4E7;
  --fg-on-dark-2: #A1A1AA;
  --fg-on-dark-3: #71717A;

  /* Lines */
  --line-0: #F4F4F5;
  --line-1: #E4E4E7;
  --line-2: #D4D4D8;
  --line-3: #A1A1AA;
  --line-on-dark-1: rgba(255,255,255,0.10);
  --line-on-dark-2: rgba(255,255,255,0.16);

  /* Semantic */
  --positive: #15803D;
  --positive-bg: #F0FDF4;
  --warning: #B45309;
  --warning-bg: #FFFBEB;
  --danger: #B91C1C;
  --danger-bg: #FEF2F2;
  --focus-ring: rgba(10,10,10,0.18);

  /* Type families */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-24: 24px; --fs-30: 30px; --fs-36: 36px; --fs-48: 48px;
  --fs-60: 60px; --fs-72: 72px; --fs-96: 96px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;

  /* Radii */
  --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-5: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-0: 0 0 0 1px var(--line-1);
  --shadow-1: 0 1px 2px rgba(10,10,10,0.04), 0 1px 1px rgba(10,10,10,0.03);
  --shadow-2: 0 4px 12px rgba(10,10,10,0.05), 0 1px 2px rgba(10,10,10,0.04);
  --shadow-3: 0 24px 48px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* Layout */
  --container: 1240px;
  --container-sm: 880px;
}

html { color-scheme: light; }
::selection { background: var(--fg-0); color: var(--bg-0); }