/* ============================================================
   IVANKODEV — Design Tokens
   ============================================================ */
:root {
  /* Palette */
  --ink:      #0A0B0F;
  --ink-2:    #11131A;
  --ink-3:    #0D0F15;
  --hairline: #1E2230;
  --bone:     #F4F5F7;
  --bone-2:   #A8AEBC;
  --steel:    #5B6470;
  --signal:   #1E90FF;
  --signal-2: #4DAEFF;
  --signal-dim: rgba(30, 144, 255, 0.12);
  --live:     #3FAE5E;
  --warn:     #E5A03A;
  --paper:    #F4F5F7;
  --paper-ink: #0A0B0F;

  /* Typography */
  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   clamp(0.75rem, 0.71rem + 0.18vw, 0.82rem);
  --text-sm:   clamp(0.85rem, 0.81rem + 0.20vw, 0.94rem);
  --text-base: clamp(1.00rem, 0.95rem + 0.25vw, 1.10rem);
  --text-lg:   clamp(1.18rem, 1.10rem + 0.40vw, 1.32rem);
  --text-xl:   clamp(1.45rem, 1.30rem + 0.75vw, 1.75rem);
  --text-2xl:  clamp(1.90rem, 1.60rem + 1.50vw, 2.50rem);
  --text-3xl:  clamp(2.50rem, 2.00rem + 2.50vw, 3.75rem);
  --text-hero: clamp(3.25rem, 2.40rem + 4.25vw, 5.75rem);

  /* Spacing */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px; --s-48: 192px; --s-64: 256px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Layout */
  --maxw: 1200px;
  --maxw-prose: 720px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-signal: 0 0 0 1px rgba(30,144,255,0.25), 0 12px 40px rgba(30,144,255,0.12);
}