/* ─────────────────────────────────────────────────────────────────────────
   Operalytics — Color tokens
   A dark, premium palette: near-black surfaces, a single mint green accent,
   and a tight neutral ramp. The brand lives in the dark.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Base surfaces (dark stack) ───────────────────────────────────────── */
  --op-bg:            #0A0A0A;  /* page background — the canvas everything sits on */
  --op-surface:       #121212;  /* raised section background (e.g. Fidel section) */
  --op-elevated:      #1E1E1E;  /* cards, modals, popovers */
  --op-elevated-2:    #1A1A1A;  /* secondary elevated (stacked cards) */

  /* ── Brand accent — mint green ─────────────────────────────────────── */
  --op-accent:        #22C55E;  /* primary brand green */
  --op-accent-hover:  #16A34A;  /* darker — button/link hover */
  --op-accent-light:  #4ADE80;  /* lighter — gradient stops, highlights */
  --op-accent-soft:   #86EFAC;  /* softest — hovered tag text */

  /* ── Neutrals / text ──────────────────────────────────────────────────── */
  --op-text:          #F5F5F5;  /* primary text — near-white */
  --op-text-muted:    #9CA3AF;  /* secondary text, captions, nav idle */
  --op-text-faint:    rgba(156,163,175,0.5);  /* tertiary — copyright, fine print */

  /* ── Borders / hairlines ──────────────────────────────────────────────── */
  --op-border:        rgba(255,255,255,0.06);  /* default hairline */
  --op-border-strong: rgba(255,255,255,0.12);  /* inputs, outlined buttons */
  --op-border-accent: rgba(34,197,94,0.40);   /* accent-tinted border */

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --op-success:       #22C55E;  /* positive toast / confirmation */
  --op-danger:        #F87171;  /* form errors */

  /* ── Accent washes (radial orbs, glows, tints over dark) ──────────────── */
  --op-glow-strong:   rgba(34,197,94,0.22);
  --op-glow:          rgba(34,197,94,0.13);
  --op-glow-soft:     rgba(34,197,94,0.07);
  --op-tint-08:       rgba(34,197,94,0.08);

  /* ── White overlays (used over dark surfaces) ─────────────────────────── */
  --op-white-04:      rgba(255,255,255,0.04);
  --op-white-08:      rgba(255,255,255,0.08);
  --op-white-12:      rgba(255,255,255,0.12);
}