/* ─── LAZARUS DESIGN TOKENS ─────────────────────────────────────────── */

:root {
  /* Canvas */
  --black: #000000;
  --ink: #050507;
  --surface: #0a0a0d;
  --surface-2: #111116;
  --surface-3: #1a1a22;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-hi: rgba(255, 255, 255, 0.22);
  --glass: rgba(255, 255, 255, 0.03);
  --glass-2: rgba(255, 255, 255, 0.06);

  /* The one accent — deliberate restraint */
  --accent: #a78bfa;
  --accent-deep: #7c3aed;
  --accent-soft: rgba(167, 139, 250, 0.16);
  --accent-haze: rgba(167, 139, 250, 0.05);
  --accent-wash: rgba(167, 139, 250, 0.02);

  /* Semantic only when needed */
  --alive: #34d399;
  --alive-soft: rgba(52, 211, 153, 0.14);
  --silent: #f87171;
  --silent-soft: rgba(248, 113, 113, 0.14);
  --watch: #fbbf24;
  --watch-soft: rgba(251, 191, 36, 0.14);

  /* Ink */
  --text: #fafafa;
  --text-2: rgba(250, 250, 250, 0.64);
  --text-3: rgba(250, 250, 250, 0.38);
  --text-4: rgba(250, 250, 250, 0.18);

  /* Type */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Scale (precise, restrained) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* Radii */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-xs: 120ms;
  --t-sm: 200ms;
  --t: 320ms;
  --t-lg: 560ms;
  --t-xl: 880ms;

  /* Shadows — restrained, functional */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.6);
  --shadow-accent: 0 24px 80px rgba(167, 139, 250, 0.2);

  /* Layout */
  --w-sm: 640px;
  --w-md: 900px;
  --w-lg: 1200px;
  --w-xl: 1440px;
  --gutter: 24px;
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
}