:root {
  /* Palette (named by hue) */
  --color-dark-blue: #180048;
  --color-purple: #5840ff;
  --color-light-blue: #60f0f8;
  --color-pink: #f050f8;

  /* Semantic roles */
  --color-ink: var(--color-dark-blue);
  --color-primary: var(--color-purple);
  --color-accent: var(--color-pink);
  --color-highlight: var(--color-light-blue);

  --color-bg: #f4f2ff;
  --color-bg-deep: #e8e4ff;
  --color-surface: rgba(255, 255, 255, 0.92);
  --color-surface-strong: #ffffff;
  --color-muted: #5c4a7a;

  --gradient-page: radial-gradient(
      120% 80% at 100% 0%,
      color-mix(in srgb, var(--color-light-blue) 35%, transparent),
      transparent 50%
    ),
    radial-gradient(
      90% 70% at 0% 100%,
      color-mix(in srgb, var(--color-pink) 22%, transparent),
      transparent 55%
    ),
    linear-gradient(
      165deg,
      var(--color-bg) 0%,
      var(--color-bg-deep) 45%,
      color-mix(in srgb, var(--color-light-blue) 12%, white) 100%
    );

  --gradient-hero: linear-gradient(
    115deg,
    var(--color-purple) 0%,
    var(--color-pink) 45%,
    var(--color-light-blue) 100%
  );

  --gradient-key: linear-gradient(
    145deg,
    var(--color-purple) 0%,
    color-mix(in srgb, var(--color-pink) 70%, var(--color-purple)) 100%
  );

  --gradient-key-secondary: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-dark-blue) 75%, var(--color-purple)) 0%,
    var(--color-dark-blue) 100%
  );

  --gradient-key-aqua: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-light-blue) 40%, var(--color-purple)) 0%,
    var(--color-light-blue) 100%
  );

  --shadow-soft: 0 8px 32px
      color-mix(in srgb, var(--color-dark-blue) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-purple) 8%, transparent);
  --shadow-glow: 0 0 40px color-mix(in srgb, var(--color-light-blue) 35%, transparent);

  --font-display: "Cooper Lt BT", "Cooper", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;

  --space-touch-target: 64px;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --radius: 16px;
  --radius-pill: 999px;
}