/* ScamProfiler — Color tokens
   The palette is deliberately tiny. Black = focus. White = clarity. Red = signal.
   Red is used sparingly and must never dominate. */

:root {
  /* ── Base palette ─────────────────────────────── */
  --sp-black:        #000000;  /* The canvas. Focus. The invisible structure. */
  --sp-white:        #FFFFFF;  /* Clarity. Recognition. Understanding. */
  --sp-red:          #E40134;  /* The signal. Attention. A shift in a situation. */

  /* Neutral steps — pulled off pure black for surfaces, hairlines and muted text.
     Kept low-chroma and cool so red stays the only color that ever "speaks". */
  --sp-ink-900:      #050505;  /* near-black surface, one notch off the void */
  --sp-ink-800:      #0E0E10;  /* raised surface / card */
  --sp-ink-700:      #161618;  /* hover surface */
  --sp-ink-600:      #232327;  /* hairline borders on dark */
  --sp-ink-500:      #3A3A40;  /* strong border / divider */
  --sp-ash-400:      #6E6E76;  /* muted / disabled text */
  --sp-ash-300:      #9A9AA2;  /* secondary text */
  --sp-ash-200:      #C7C7CC;  /* tertiary on dark */

  /* Red shades — for hover/press states only. Never introduce new hues. */
  --sp-red-bright:   #FF1F4E;  /* hover — red emerging toward the light */
  --sp-red-deep:     #A8002690; /* press / pressed glow */
  --sp-red-dim:      #E4013455; /* 33% red — faint frame lines, glow falloff */
  --sp-red-ghost:    #E4013418; /* ~9% red — wash / focus ring backdrop */

  /* ── Semantic aliases ─────────────────────────── */
  --surface-base:        var(--sp-black);
  --surface-raised:      var(--sp-ink-800);
  --surface-raised-hover:var(--sp-ink-700);
  --surface-sunken:      var(--sp-ink-900);

  --text-primary:        var(--sp-white);
  --text-secondary:      var(--sp-ash-300);
  --text-muted:          var(--sp-ash-400);
  --text-signal:         var(--sp-red);
  --text-on-signal:      var(--sp-white);

  --border-hairline:     var(--sp-ink-600);
  --border-strong:       var(--sp-ink-500);
  --border-signal:       var(--sp-red);
  --border-signal-dim:   var(--sp-red-dim);

  --signal:              var(--sp-red);
  --signal-hover:        var(--sp-red-bright);
  --signal-wash:         var(--sp-red-ghost);

  /* The red line — the brand's core metaphor, as a reusable gradient. */
  --sp-line-glow: linear-gradient(90deg,
      transparent 0%,
      var(--sp-red-dim) 18%,
      var(--sp-red) 50%,
      var(--sp-red-dim) 82%,
      transparent 100%);

  /* Radial fade used behind a hot point of the red line. */
  --sp-line-bloom: radial-gradient(ellipse 60% 100% at 50% 50%,
      var(--sp-red-dim) 0%, transparent 70%);
}