:root {
  /* Brand color */
  --purple: #6E5CFA;
  --purple-soft: #A99BFF;
  --purple-veil: rgba(110, 92, 250, 0.12);
  --indigo: #070C31;
  --indigo-2: #0D1340;
  --ink: #1B1B1B;
  --black: #000000;
  --paper: #FAFAFA;
  --white: #FFFFFF;
  --yellow: #F4CF43;
  --magenta: #C91B7A;

  --border-dim: rgba(255, 255, 255, 0.12);
  --border-ink: rgba(0, 0, 0, 0.12);

  /* Typography */
  --font-display: "Zalando Sans Expanded", "Inter", -apple-system, system-ui, sans-serif;
  --font-body: "Roboto", -apple-system, system-ui, sans-serif;

  /* Fluid type scale */
  --fs-display-xl: clamp(2.25rem, 9vw, 8.25rem);
  --fs-display-l: clamp(2rem, 6vw, 5.5rem);
  --fs-display-m: clamp(1.625rem, 3.8vw, 3.25rem);
  --fs-display-s: clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-body-l: clamp(1.125rem, 1.35vw, 1.375rem);
  --fs-body: 1rem;
  --fs-micro: 0.8125rem;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 160px;
  --s-9: 220px;

  /* Layout */
  --container-max: 1440px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 240ms;
  --dur: 600ms;

  /* Radius */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 28px;
  --r-full: 999px;
}