/* Design tokens. Palette is sampled from BYTE's artwork: electric blue, warm orange, white. */
:root {
  --ink: #0b1033;
  --ink-soft: #3a4170;
  --ink-mute: #646a99;

  --blue-950: #00084a;
  --blue-900: #000f8f;
  --blue-700: #0018f2;
  --blue-500: #0062ff;
  --blue-300: #8cc4ff;
  --blue-100: #e3ecff;

  --orange-600: #d96f0e;
  --orange-500: #f48821;
  --orange-100: #fff0df;

  --paper: #f3f6ff;
  --card: #ffffff;
  --line: #d3daf6;

  --ok: #0e8a45;
  --ok-bg: #e2f7ea;
  --warn: #b35900;
  --warn-bg: #fff1dc;
  --bad: #c42b1c;
  --bad-bg: #fde8e5;

  --font-display: "Sora", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --step-3: clamp(2rem, 1.4rem + 3vw, 3.6rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --shadow-pop: 6px 6px 0 var(--blue-900);
  --shadow-card: 0 1px 0 var(--line), 0 10px 30px -14px rgba(0, 15, 143, 0.28);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dock-h: 76px;
}