:root {
  --rap-white: #fff;
  --rap-paper: #f5f5f7;
  --rap-surface: #fff;
  --rap-ink: #2c2c2e;
  --rap-navy: #1c1c1e;
  --rap-red: #d9251b;
  --rap-red-dark: #ad1f17;
  --rap-orange: #f37021;
  --rap-yellow: #ffcc00;
  --rap-blue: #0072bc;
  --rap-violet: #5c2d91;
  --rap-cyan: #00938f;
  --rap-muted: #8e8e93;
  --rap-line: #e5e5ea;
  --rap-border: var(--rap-line);
  --rap-radius-sm: 6px;
  --rap-radius-md: 8px;
  --rap-radius-lg: 12px;
  --rap-shadow: 0 1px 4px rgb(0 0 0 / 5%);
  --rap-shadow-sm: 0 2px 6px rgb(0 0 0 / 5%);
  --rap-shadow-lg: 0 4px 12px rgb(0 0 0 / 8%);
  --rap-shadow-hover: 0 4px 12px rgb(0 0 0 / 8%);
  --rap-container: 1200px;
  --rap-shell: var(--rap-container);
  --rap-font-display: "ABeeZee", sans-serif;
  --rap-gap: 20px;
  --rap-section-space: 40px;
  --rap-transition: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rap-transition: 0ms;
  }
}