/* HUGME design tokens. Shared by every page and component. */
:root {
  --color-purple: #5100ed;
  --color-cyan: #00b7dc;
  --color-pink: #ee168b;
  --color-blue: #0642cd;
  --color-yellow: #ffd52a;
  --color-orange: #ff791c;
  --color-ink: #072978;
  --color-muted: #43598c;
  --color-white: #fff;
  --color-cream: #faf6ed;
  --color-ice: #e9f7ff;
  --color-line: #e2eaf5;
  --font-family: Arial, Helvetica, sans-serif;
  --font-body: 1rem;
  --font-small: .875rem;
  --font-label: 1.125rem;
  --font-lead: clamp(1.125rem, 3.5vw, 1.875rem);
  --font-display: clamp(3.5rem, 10.1vw, 6.5rem);
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 900;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-sm: .75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --shadow-card: 0 8px 28px rgb(7 41 120 / .06);
  --focus-ring: 0 0 0 4px rgb(0 183 220 / .30);
  --content-max: 1200px;
  --page-gutter: clamp(1.25rem, 5.5vw, 4rem);
  --nav-height: 88px;
  --transition: 160ms ease;
  /* Compatibility names used by inline product color swatches. */
  --purple: var(--color-purple);
  --teal: var(--color-cyan);
  --pink: var(--color-pink);
  --blue: var(--color-blue);
  --yellow: var(--color-yellow);
  --orange: var(--color-orange);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-line);
}