/* ============================================================
   core/variables.css
   Tokens only — no layout, no components
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     1. COLOR PATH TRACKS (Raw RGB for dynamic alpha transparency)
     ------------------------------------------------------------ */
  --plx-brand-primary-raw:   20, 184, 255;   /* #14b8ff */
  --plx-brand-secondary-raw: 52, 211, 153;   /* #34d399 */
  --plx-slate-raw:           148, 163, 184;  /* #94a3b8 */

  /* ------------------------------------------------------------
     2. BRAND & STATIC ACCENTS
     ------------------------------------------------------------ */
  --plx-brand-primary:   rgb(var(--plx-brand-primary-raw));
  --plx-brand-secondary: rgb(var(--plx-brand-secondary-raw));
  --plx-brand-purple:    #7c3aed;
  --plx-brand-amber:     #f59e0b;
  --plx-brand-red:       #ef4444;

  /* Status Colors */
  --plx-status-green:    #22c55e;
  --plx-status-amber:    #f59e0b;
  --plx-status-red:      #ef4444;
  --plx-status-blue:     var(--plx-brand-primary);

  /* ------------------------------------------------------------
     3. RADII (Strict Nesting Scales)
     ------------------------------------------------------------ */
  --plx-radius-sm:   6px;
  --plx-radius-md:   10px;
  --plx-radius-lg:   16px;
  --plx-radius-xl:   24px;
  --plx-radius-pill: 9999px;

  /* ------------------------------------------------------------
     4. TYPOGRAPHY
     ------------------------------------------------------------ */
  --plx-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Type Scale */
  --plx-font-size-xs:  0.75rem;
  --plx-font-size-sm:  0.875rem;
  --plx-font-size-md:  1rem;
  --plx-font-size-lg:  1.125rem;
  --plx-font-size-xl:  1.25rem;
  --plx-font-size-2xl: 1.5rem;
  --plx-font-size-3xl: 2rem;
  --plx-font-size-4xl: 3rem;

  /* ------------------------------------------------------------
     5. SPACING (Expanded Layout Scale for Large Enclosures)
     ------------------------------------------------------------ */
  --plx-space-1: 0.25rem;  /* 4px */
  --plx-space-2: 0.5rem;   /* 8px */
  --plx-space-3: 0.75rem;  /* 12px */
  --plx-space-4: 1rem;     /* 16px */
  --plx-space-5: 1.5rem;   /* 24px */
  --plx-space-6: 2rem;     /* 32px */
  --plx-space-7: 5rem;     /* 80px (Hero Paddings) */
  --plx-space-8: 8rem;     /* 128px (Section Enclosures) */

  /* ------------------------------------------------------------
     6. MOTION & TRANSITIONS (Hardware Accelerated Performance)
     ------------------------------------------------------------ */
  --plx-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --plx-transition:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --plx-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------
     7. LAYER DEPTH (Z-INDEX SYSTEM)
     ------------------------------------------------------------ */
  --plx-z-base:       1;
  --plx-z-nav:        900;
  --plx-z-overlay:    950;
  --plx-z-modal:      1000;
  --plx-z-toast:      1050;

  /* ------------------------------------------------------------
     8. DYNAMIC GLOWS & GLASS EFFECTS
     ------------------------------------------------------------ */
  --plx-glow-blue:
    0 0 10px rgba(var(--plx-brand-primary-raw), 0.2),
    0 0 30px rgba(var(--plx-brand-primary-raw), 0.1);

  --plx-glow-green:
    0 0 10px rgba(var(--plx-brand-secondary-raw), 0.2),
    0 0 30px rgba(var(--plx-brand-secondary-raw), 0.1);

  --plx-glow-brand:
    0 0 15px rgba(var(--plx-brand-primary-raw), 0.2),
    0 0 40px rgba(var(--plx-brand-secondary-raw), 0.1);
}

/* ------------------------------------------------------------
   9. THEME VALUES MAP (Dark Fallback Root Setup)
   ------------------------------------------------------------ */
:root, body.plx-dark {
  --plx-bg-canvas:    #020617;
  --plx-bg-primary:    #060b14;
  --plx-bg-secondary: #0b1220;
  --plx-bg-tertiary:  #101827;
  --plx-bg-card:      #111b2f;
  --plx-bg-elevated:  #172338;

  --plx-text-primary: #e5f0ff;
  --plx-text-soft:    #9ca9c7;
  --plx-text-muted:   #6b7280;
   --plx-text-dark:   #292a2b;

  --plx-border-subtle: rgba(var(--plx-slate-raw), 0.15);
  --plx-border-strong: rgba(var(--plx-slate-raw), 0.3);

  --plx-shadow-soft:   0 18px 45px rgba(0, 0, 0, 0.45);
  --plx-shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.65);

  --plx-glass-bg:     rgba(15, 23, 42, 0.75);
  --plx-glass-border: rgba(var(--plx-slate-raw), 0.2);
  --plx-glass-blur:   24px;
}