:root{
  --accent: #ff2a2a;
  --accent-light: #ff5b5b;

  --glow-soft: rgba(255, 42, 42, 0.14);
  --glow-med: rgba(255, 42, 42, 0.24);
  --glow-strong: rgba(255, 42, 42, 0.34);

  /* ✅ Derived glow utilities (use these on cards/boxes) */
  --glow-shadow-soft: 0 0 42px var(--glow-soft);
  --glow-shadow-med:  0 0 64px var(--glow-med);
  --glow-shadow-strong: 0 0 92px var(--glow-strong);

  /* ✅ Ambient radial glow layer for ::before/::after overlays */
  --glow-radial: radial-gradient(
    60% 40% at 30% 15%,
    var(--glow-med),
    rgba(0,0,0,0) 65%
  );

  --glow-border: color-mix(in srgb, var(--accent) 40%, transparent);
  --glow-border-strong: color-mix(in srgb, var(--accent) 70%, transparent);
}

:root[data-theme="red"]{
  --accent: #ff2a2a;
  --accent-light: #ff5b5b;

  --glow-soft: rgba(255, 42, 42, 0.14);
  --glow-med: rgba(255, 42, 42, 0.24);
  --glow-strong: rgba(255, 42, 42, 0.34);

  --glow-shadow-soft: 0 0 42px var(--glow-soft);
  --glow-shadow-med:  0 0 64px var(--glow-med);
  --glow-shadow-strong: 0 0 92px var(--glow-strong);

  --glow-radial: radial-gradient(
    60% 40% at 30% 15%,
    var(--glow-med),
    rgba(0,0,0,0) 65%
  );

  --glow-border: color-mix(in srgb, var(--accent) 40%, transparent);
  --glow-border-strong: color-mix(in srgb, var(--accent) 70%, transparent);
}

:root[data-theme="green"]{
  --accent: #7cff6b;
  --accent-light: #2dffb6;

  --glow-soft: rgba(124, 255, 107, 0.16);
  --glow-med: rgba(45, 255, 182, 0.24);
  --glow-strong: rgba(45, 255, 182, 0.36);

  --glow-shadow-soft: 0 0 42px var(--glow-soft);
  --glow-shadow-med:  0 0 64px var(--glow-med);
  --glow-shadow-strong: 0 0 92px var(--glow-strong);

  --glow-radial: radial-gradient(
    60% 40% at 30% 15%,
    var(--glow-med),
    rgba(0,0,0,0) 65%
  );

  --glow-border: color-mix(in srgb, var(--accent) 40%, transparent);
  --glow-border-strong: color-mix(in srgb, var(--accent) 70%, transparent);
}