:root {
  --white: #ffffff;
  --ice: #f5f7fc;
  --blue: #0052ff;
  --pink: #ff2a85;
  --navy: #0b132b;
  --ink: #0a1026;
  --muted: #3b4460;
  --line: #e6eaf4;

  --font-display: "Hagrid", "Cabinet Grotesk", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --header-height: 4.5rem;
  --touch-min: 44px;
  --radius-card: 1.25rem;
  --radius-pill: 999px;
  --radius-ticket: 6px;

  --gutter: clamp(1.25rem, 4vw, 4.25rem);
  --container: 74rem;
  --section-y: clamp(3.25rem, 6.5vw, 5.75rem);

  --fs-h1: clamp(2.4rem, 4vw, 3.4rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.85rem);
  --fs-body: 1.0625rem;
  --tracking-display: -0.03em;

  --shadow-ticket: 0 4px 14px rgba(255, 42, 133, 0.35);
  --shadow-device: 0 32px 80px rgba(10, 16, 38, 0.22);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-header: 80;
  --z-nav: 70;
  --z-toggle: 90;
}

html {
  scroll-padding-top: calc(var(--header-height) + 0.75rem);
}