:root {
  /* Typography */
  --font: "Averia Sans Libre", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  /* Brand */
  --brand-1: #7c3aed;
  --brand-2: #22c55e;

  /* Neutrals */
  --bg: #060812;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.12);

  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.68);

  /* Effects */
  --shadow: 0 30px 120px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 80px rgba(124, 58, 237, 0.22), 0 0 120px rgba(34, 197, 94, 0.08);
  --radius: 18px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* .notify-pulse — override on a parent if needed */
  --notify-pulse-size: 8px;
  --notify-pulse-duration: 2.5s;
  --notify-pulse-ring-lag: calc(var(--notify-pulse-duration) * 0.5);
  --notify-pulse-fill: var(--brand-2);
  --notify-pulse-rgb: 34, 197, 94;

  /* Background depth */
  --bg-radial-1: radial-gradient(1200px 800px at 15% 10%, rgba(124, 58, 237, 0.35), transparent 60%);
  --bg-radial-2: radial-gradient(900px 700px at 85% 25%, rgba(34, 197, 94, 0.18), transparent 55%);
  --bg-radial-3: radial-gradient(900px 700px at 50% 110%, rgba(124, 58, 237, 0.14), transparent 60%);
}