/* ============================================================
   core/variables.css
   Sustainable Cooling Technologies — Brand Theme
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     1. COLOR PATH TRACKS (Raw RGB for dynamic alpha transparency)
     ------------------------------------------------------------ */
  --plx-brand-primary-raw:   14, 116, 144;   /* #0E7490 */
  --plx-brand-secondary-raw: 20, 136, 166;   /* #1488A6 */
  --plx-brand-accent-raw:    124, 207, 106;  /* #7CCF6A */
  --plx-surface-light-raw:   243, 247, 249;  /* #F3F7F9 */
  --plx-slate-raw:           8, 16, 42;      /* #08102A */

  /* ------------------------------------------------------------
     2. BRAND & STATIC ACCENTS
     ------------------------------------------------------------ */
  --plx-brand-primary:   rgb(var(--plx-brand-primary-raw));   /* Teal-Blue */
  --plx-brand-secondary: rgb(var(--plx-brand-secondary-raw)); /* Aqua */
  --plx-brand-green:     rgb(var(--plx-brand-accent-raw));    /* Eco Green */
  --plx-brand-navy:      #08102A;                             /* Deep Navy */
  --plx-brand-light:     #F3F7F9;                             /* Soft Light */

  /* Status Colors */
  --plx-status-green:    #7CCF6A;
  --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 (Consistent 4px structural step interval)
     ------------------------------------------------------------ */
  --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: 3rem;     /* 48px */
  --plx-space-8: 4rem;     /* 64px */

  /* ------------------------------------------------------------
     6. MOTION & TRANSITIONS
     ------------------------------------------------------------ */
  --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
     ------------------------------------------------------------ */
  --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.25),
    0 0 30px rgba(var(--plx-brand-secondary-raw), 0.15);

  --plx-glow-green:
    0 0 10px rgba(var(--plx-brand-accent-raw), 0.25),
    0 0 30px rgba(var(--plx-brand-accent-raw), 0.15);

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

/* ------------------------------------------------------------
   9. THEME VALUES MAP (Dark Mode)
   ------------------------------------------------------------ */
:root, body.plx-dark {
   --plx-bg-canvas:    #08102A; /* Deep Navy */
   --plx-bg-primary:   #0A152F;
   --plx-bg-secondary: #0D1C3F;
   --plx-bg-tertiary:  #10244F;
   --plx-bg-card:      #132D60;
   --plx-bg-elevated:  #163670;

   --plx-text-primary: #F3F7F9; /* Light Grey */
   --plx-text-soft:    rgba(243, 247, 249, 0.75);
   --plx-text-muted:   rgba(243, 247, 249, 0.55);
   --plx-text-dark:    rgba(47, 48, 49, 0.95);

   --plx-border-subtle: rgba(243, 247, 249, 0.12);
   --plx-border-strong: rgba(243, 247, 249, 0.25);

   --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(8, 16, 42, 0.55);
   --plx-glass-border: rgba(243, 247, 249, 0.15);
   --plx-glass-blur:   24px;
}