/* GhostVPN — Color tokens
   A dark-first "void + phantom" system. Deep cool-black surfaces, one luminous
   spectral-mint accent, a restrained aurora-cyan support, and a rare fog-light
   surface for inverted sections. */

:root {
  /* ---- Void: core dark surfaces (cool-black, slightly blue-green) ---- */
  --void-950: #06080B;   /* deepest inset / page void */
  --void-900: #0A0D12;   /* base page background */
  --void-800: #0F141B;   /* raised panels */
  --void-700: #151C25;   /* cards */
  --void-600: #1D2530;   /* elevated / hover */
  --void-500: #28323F;   /* strong fills, dividers on dark */

  /* ---- Ink: text on dark ---- */
  --ink-000: #FFFFFF;
  --ink-100: #ECF2F0;    /* primary text */
  --ink-300: #AFBCB8;    /* secondary text */
  --ink-500: #74827F;    /* muted text / placeholders */
  --ink-700: #46524F;    /* disabled */

  /* ---- Phantom: primary brand accent (spectral mint-green) ---- */
  --phantom-300: #A9FFD3;
  --phantom-400: #74FFBE;
  --phantom-500: #4DF2A6;  /* core accent */
  --phantom-600: #21D588;  /* hover/press deeper */
  --phantom-700: #16A86B;
  --phantom-glow: rgba(77, 242, 166, 0.30);
  --phantom-faint: rgba(77, 242, 166, 0.10);

  /* ---- Aurora: cool support accent (used sparingly in gradients/info) ---- */
  --aurora-400: #6FE3F5;
  --aurora-500: #38C9E8;
  --aurora-600: #1FA6C7;

  /* ---- Fog: rare light surface for inverted sections ---- */
  --fog-50:  #F4F8F6;
  --fog-100: #E7EEEB;
  --fog-200: #D3DEDA;

  /* ---- Semantic raw ---- */
  --success-500: #4DF2A6;
  --warning-500: #F5C451;
  --danger-500:  #FF6B6B;
  --info-500:    #38C9E8;

  /* =====================================================================
     Semantic aliases — reference these in components, not the raws above.
     ===================================================================== */

  /* Surfaces */
  --bg-page:      var(--void-900);
  --bg-inset:     var(--void-950);
  --bg-raised:    var(--void-800);
  --bg-card:      var(--void-700);
  --bg-elevated:  var(--void-600);
  --bg-fill:      var(--void-500);
  --surface-glass: rgba(15, 20, 27, 0.66);   /* + backdrop-blur */

  /* Text */
  --text-primary:   var(--ink-100);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-500);
  --text-disabled:  var(--ink-700);
  --text-on-accent: var(--void-950);

  /* Accent */
  --accent:        var(--phantom-500);
  --accent-hover:  var(--phantom-400);
  --accent-press:  var(--phantom-600);
  --accent-soft:   var(--phantom-faint);
  --accent-glow:   var(--phantom-glow);

  /* Borders & lines */
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(77, 242, 166, 0.45);

  /* Semantic */
  --status-success: var(--success-500);
  --status-warning: var(--warning-500);
  --status-danger:  var(--danger-500);
  --status-info:    var(--info-500);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(77, 242, 166, 0.32);
}