/* ============================================================
   Protectors — Color tokens
   Dark blues & purples anchor; neon pops of red/pink/orange.
   Values from the Protectors Brand Guidelines (Figma).
   ============================================================ */

:root {
  /* ---- Primary palette ---- */
  --color-midnight:        #050030; /* deepest anchor, backgrounds */
  --color-deep-space:      #1E0075; /* deep navy/indigo */
  --color-electric-purple: #6726FF; /* signature purple */
  --color-violet:          #923EF0; /* bright violet */
  --color-fuchsia:         #B526BC; /* magenta-purple */
  --color-magenta:         #FF3564; /* hot pink */

  /* ---- Secondary ---- */
  --color-cobalt:          #3332FF; /* electric blue */
  --color-periwinkle:      #86A0F0; /* soft blue, support */

  /* ---- Accent ---- */
  --color-ignite:          #FF2E00; /* neon red-orange, sparingly */

  /* ---- Neutrals ---- */
  --color-white:           #FFFFFF;
  --color-ink:             #0F0F0F; /* near-black, text on light */
  --color-black:           #000000;
  --color-cloud:           #F5F5F5; /* light surface */
  --color-fog:             #D9D9D9; /* hairline / muted */

  /* ---- Translucent overlays (on dark) ---- */
  --color-white-08:        rgba(255,255,255,0.08);
  --color-white-12:        rgba(255,255,255,0.12);
  --color-white-16:        rgba(255,255,255,0.16);
  --color-white-64:        rgba(255,255,255,0.64);

  /* ============================================================
     Semantic aliases — default brand context is DARK.
     ============================================================ */
  --bg-page:        var(--color-midnight);
  --bg-page-2:      var(--color-deep-space);
  --surface-card:   rgba(255,255,255,0.04);
  --surface-card-solid: #0E0640; /* solid raised surface on dark */
  --surface-inset:  rgba(255,255,255,0.06);

  --border-subtle:  var(--color-white-12);
  --border-strong:  var(--color-white-16);
  --border-on-light:var(--color-ink);

  --text-primary:   var(--color-white);
  --text-secondary: rgba(255,255,255,0.70);
  --text-muted:     rgba(255,255,255,0.50);
  --text-on-light:  var(--color-ink);
  --text-on-light-muted: rgba(15,15,15,0.62);

  --accent:         var(--color-electric-purple);
  --accent-hot:     var(--color-magenta);
  --accent-ignite:  var(--color-ignite);

  --focus-ring:     var(--color-periwinkle);
}