/* ============================================================
   Protectors — Gradients
   Gradients are core to the visual language: energy, depth,
   fluidity. Only the approved color pairs below. Never apply
   gradients to typography or the logomark.
   ============================================================ */

:root {
  /* Core brand gradient — the cover field (deep, vertical) */
  --grad-core:        linear-gradient(180deg, #050030 0%, #6726FF 100%); /* @kind color */
  --grad-cover:       linear-gradient(180deg, #1E0075 0%, #923EF0 100%); /* @kind color */

  /* Approved pairings */
  --grad-ignite-violet:   linear-gradient(180deg, #FF2E00 0%, #923EF0 100%); /* @kind color */
  --grad-ignite-magenta:  linear-gradient(180deg, #FF2E00 0%, #FF3564 100%); /* @kind color */
  --grad-violet-cobalt:   linear-gradient(180deg, #923EF0 0%, #3332FF 100%); /* @kind color */
  --grad-cobalt-magenta:  linear-gradient(180deg, #3332FF 0%, #FF3564 100%); /* @kind color */
  --grad-periwinkle-purple: linear-gradient(180deg, #86A0F0 0%, #6726FF 100%); /* @kind color */
  --grad-violet-magenta:  linear-gradient(180deg, #923EF0 0%, #FF3564 100%); /* @kind color */

  /* Hot accent gradient for CTAs / highlight surfaces */
  --grad-hot:         linear-gradient(135deg, #FF2E00 0%, #FF3564 55%, #B526BC 100%); /* @kind color */
  --grad-spectrum:    linear-gradient(120deg, #FF2E00 0%, #B526BC 38%, #6726FF 70%, #3332FF 100%); /* @kind color */

  /* Subtle dark page wash */
  --grad-page:        linear-gradient(180deg, #050030 0%, #16003A 55%, #1E0075 100%); /* @kind color */

  /* Radial glow used behind hero content */
  --glow-purple:      radial-gradient(60% 60% at 50% 40%, rgba(103,38,255,0.45) 0%, rgba(5,0,48,0) 70%); /* @kind color */
  --glow-magenta:     radial-gradient(50% 50% at 70% 30%, rgba(255,53,100,0.35) 0%, rgba(5,0,48,0) 70%); /* @kind color */
}