/* Design tokens: every color, size and timing used across the site. */
:root {
  --color-bg: #ffffff;
  --color-ink: #000000;
  --color-ink-soft: #3a3a3e;
  --color-body: #4a4a4f;
  --color-muted: #6e6e73;
  --color-line: #ededef;
  --color-surface: #f6f6f7;
  --color-surface-2: #ececee;
  --color-clip: #f5f5f6;
  --color-danube: #2453ff;
  --color-lime: #c8f53c;
  --color-code-bg: #0c0c0e;
  --color-error: #c4321c;
  --color-success: #1a7f37;

  --holo: linear-gradient(115deg, #c8f53c 0%, #f6ea4a 28%, #9ee7ff 62%, #5d7dff 100%);
  --holo-soft: linear-gradient(115deg, #ecfbb8 0%, #fcf6b8 30%, #d6f4ff 65%, #c9d4ff 100%);

  --font-sans: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  --text-h3: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  --text-h2: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  --text-hero: clamp(2.3rem, 0.9rem + 4.2vw, 4.7rem);

  --gutter: clamp(1rem, 0.4rem + 2.4vw, 3rem);
  --section: clamp(5rem, 3rem + 7vw, 10rem);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 48px -24px rgba(0, 0, 0, 0.28);
  --shadow-float: 0 1px 0 rgba(0, 0, 0, 0.03), 0 18px 40px -22px rgba(0, 0, 0, 0.25);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --header-h: 68px;
}