/* ============================================================
   ParsinX — Color System
   Dark-first. Cool near-black neutrals, electric-azure brand,
   and a four-stop "AI glow" gradient (azure→cyan→violet→magenta).
   ============================================================ */

:root {
  /* ---- Brand monogram base ---- */
  --px-black:        #04050A;
  --px-white:        #FFFFFF;

  /* ---- Cool ink neutral scale (bg → text) ---- */
  --px-ink-950:      #06070C;  /* deepest app void           */
  --px-ink-900:      #0A0C13;  /* app background             */
  --px-ink-850:      #0E1019;  /* sunken / well              */
  --px-ink-800:      #12151F;  /* card surface               */
  --px-ink-700:      #181C29;  /* raised surface             */
  --px-ink-600:      #212636;  /* hairline borders on dark   */
  --px-ink-500:      #2C3346;  /* strong border / divider    */
  --px-ink-400:      #3C4459;  /* disabled stroke            */
  --px-ink-300:      #5A6478;  /* muted text / icon          */
  --px-ink-200:      #8B95AB;  /* secondary text             */
  --px-ink-100:      #BFC7D6;  /* primary-dim text           */
  --px-ink-50:       #E9EDF6;  /* high-emphasis text         */

  /* ---- Brand accents ---- */
  --px-azure:        #3D7BFF;  /* PRIMARY signature          */
  --px-azure-bright: #5E94FF;
  --px-azure-deep:   #2456E6;
  --px-cyan:         #22D3EE;
  --px-violet:       #8B5CF6;
  --px-magenta:      #E94FD0;

  /* ---- Status ---- */
  --px-emerald:      #2DD4A7;  /* online / uptime            */
  --px-emerald-deep: #15A37C;
  --px-amber:        #F5A524;  /* warning / provisioning     */
  --px-rose:         #FB5474;  /* error / offline            */
  --px-rose-deep:    #E0294D;

  /* ---- AI-glow gradient stops (used by glowing borders) ---- */
  --px-glow-1:       #3D7BFF;
  --px-glow-2:       #22D3EE;
  --px-glow-3:       #8B5CF6;
  --px-glow-4:       #E94FD0;
  --px-glow-gradient: conic-gradient(
      from 210deg,
      var(--px-glow-1), var(--px-glow-2), var(--px-glow-3),
      var(--px-glow-4), var(--px-glow-1));
  /* Seamless flowing gradient — animate background-position 0 → 300% to
     "rotate" light around a masked border without @property. */
  --px-glow-linear: linear-gradient(
      100deg, var(--px-glow-1), var(--px-glow-2),
      var(--px-glow-3), var(--px-glow-4), var(--px-glow-1));

  /* ============================================================
     SEMANTIC ALIASES — author UIs against these
     ============================================================ */

  /* Surfaces */
  --surface-app:       var(--px-ink-900);
  --surface-sunken:    var(--px-ink-850);
  --surface-card:      var(--px-ink-800);
  --surface-raised:    var(--px-ink-700);
  --surface-overlay:   rgba(16, 19, 28, 0.82);
  --surface-glass:     rgba(24, 28, 41, 0.55);

  /* Text */
  --text-primary:      var(--px-ink-50);
  --text-secondary:    var(--px-ink-200);
  --text-muted:        var(--px-ink-300);
  --text-disabled:     var(--px-ink-400);
  --text-inverse:      var(--px-ink-950);
  --text-accent:       var(--px-azure-bright);

  /* Borders */
  --border-subtle:     var(--px-ink-600);
  --border-default:    var(--px-ink-500);
  --border-strong:     var(--px-ink-400);
  --border-accent:     color-mix(in srgb, var(--px-azure) 55%, transparent);

  /* Accent / interaction */
  --accent:            var(--px-azure);
  --accent-hover:      var(--px-azure-bright);
  --accent-press:      var(--px-azure-deep);
  --accent-soft:       color-mix(in srgb, var(--px-azure) 16%, transparent);
  --accent-text-on:    var(--px-white);

  /* Status semantics */
  --status-online:     var(--px-emerald);
  --status-warn:       var(--px-amber);
  --status-error:      var(--px-rose);
  --status-online-soft: color-mix(in srgb, var(--px-emerald) 16%, transparent);
  --status-warn-soft:   color-mix(in srgb, var(--px-amber) 16%, transparent);
  --status-error-soft:  color-mix(in srgb, var(--px-rose) 16%, transparent);
}