/* ============================================================
   Octomatica — canonical design tokens (THE single source).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=Onest:wght@300..800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --paper: #FAFBFA;
  --paper-2: #F1F4F2;
  --surface: #FFFFFF;
  --surface-2: #F7F9F8;
  --ink-surface: oklch(0.21 0.028 168);
  --ink-surface-2: oklch(0.25 0.034 168);

  --ink: #0F1613;
  --ink-2: #424D47;
  --ink-3: #5E6A63;
  --ink-on-dark: #ECF3EF;
  --ink-on-dark-2: #A6B8AF;

  --line: #E7ECE9;
  --line-2: #D6DBD8;
  --line-strong: #0F1613;
  --ink-line: rgba(236,243,239,.12);

  --accent: #0E9F6E;
  --accent-bright: #14B981;
  --accent-deep: #0A7351;
  --accent-on-ink: #3FE0A6;
  --accent-soft: #DEF3E8;
  --accent-softer: #EDF8F1;
  --accent-on: #FFFFFF;
  --glow: rgba(20,185,129,.22);
  --glow-2: rgba(20,185,129,.10);

  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(16,24,15,.05), 0 2px 8px rgba(16,24,15,.04);
  --sh-md: 0 4px 14px rgba(16,24,15,.06), 0 14px 36px -10px rgba(16,24,15,.10);
  --sh-lg: 0 8px 24px rgba(16,24,15,.08), 0 30px 70px -20px rgba(16,24,15,.16);
  --sh-glow: 0 14px 40px -10px var(--glow);

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);

  --font-display: 'Golos Text', system-ui, sans-serif;
  --font-head:    'Golos Text', system-ui, sans-serif;
  --font-sans:    'Onest', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1160px;
  --maxw-wide: 1340px;
  --nav-h: 62px;

  color-scheme: light;
}

html { font-size: 93.75%; }
body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); color: var(--accent-deep); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }