/**
 * Energy Dashboards Design Token System
 * "Corporate Trust" — modern enterprise SaaS meets intelligent energy systems
 */

:root {
  /* ── Backgrounds — light slate palette ───────────────────────────────── */
  --bg-void:        #F8FAFC;   /* page background — slate-50 */
  --bg-surface:     #FFFFFF;   /* card surfaces */
  --bg-elevated:    #FFFFFF;   /* modals, dropdowns */
  --bg-border:      #E2E8F0;   /* slate-200 borders */
  --bg-hover:       #F1F5F9;   /* slate-100 hover */
  --bg-input:       #FFFFFF;   /* form inputs */

  /* ── Primary brand — indigo/violet gradient palette ──────────────────── */
  --primary:        #4F46E5;   /* Indigo 600 */
  --primary-hover:  #4338CA;   /* Indigo 700 */
  --primary-dim:    #EEF2FF;   /* Indigo 50 — tinted backgrounds */
  --secondary:      #7C3AED;   /* Violet 600 — gradient terminus */
  --secondary-dim:  #F5F3FF;   /* Violet 50 */

  /* ── Green — success, export, generation ────────────────────────────── */
  --green-bright:   #10B981;   /* Emerald 500 — active/generating/export */
  --green-mid:      #059669;   /* Emerald 600 */
  --green-dim:      #D1FAE5;   /* Emerald 100 */
  --green-glow:     rgba(16, 185, 129, 0.15);
  --green-glow-sm:  rgba(16, 185, 129, 0.08);
  --green-glow-lg:  rgba(16, 185, 129, 0.25);

  /* ── Energy state colours — preserved for data semantics ─────────────── */
  --solar:          #F59E0B;   /* Amber 500 — sunlight */
  --solar-dim:      #FEF3C7;   /* Amber 100 */
  --solar-glow:     rgba(245, 158, 11, 0.15);
  --battery-charge: #3B82F6;   /* Blue 500 — stored energy */
  --battery-drain:  #F97316;   /* Orange 500 — releasing energy */
  --battery-glow:   rgba(59, 130, 246, 0.15);
  --grid-import:    #EF4444;   /* Red 500 — pulling from grid */
  --grid-export:    #10B981;   /* Emerald 500 — pushing to grid */
  --grid-glow:      rgba(239, 68, 68, 0.15);
  --ev:             #06B6D4;   /* Cyan 500 — electric vehicles */
  --ev-glow:        rgba(6, 182, 212, 0.15);
  --heating:        #EC4899;   /* Pink 500 — thermal */
  --heating-glow:   rgba(236, 72, 153, 0.15);
  --consumption:    #64748B;   /* Slate 500 — general consumption */

  /* ── Status colours ──────────────────────────────────────────────────── */
  --status-active:  #10B981;
  --status-warn:    #F59E0B;
  --status-error:   #EF4444;
  --status-neutral: #64748B;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --text-primary:   #0F172A;   /* Slate 900 */
  --text-secondary: #64748B;   /* Slate 500 */
  --text-dim:       #94A3B8;   /* Slate 400 */
  --text-inverse:   #FFFFFF;

  /* ── Data readout — indigo; sensor cards override with energy colours ── */
  --readout:        #4F46E5;
  --readout-dim:    #7C3AED;

  /* ── Fonts ───────────────────────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-data:    'Azeret Mono', monospace;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* ── Sizing & Spacing ────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   400ms ease;

  /* ── Shadows — indigo-tinted for brand depth ─────────────────────────── */
  --shadow-card:  0 4px 20px -2px rgba(79, 70, 229, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 10px 25px -5px rgba(79, 70, 229, 0.15), 0 8px 10px -6px rgba(79, 70, 229, 0.08);
  --shadow-glow:  0 0 32px rgba(79, 70, 229, 0.2);
  --shadow-modal: 0 24px 60px rgba(79, 70, 229, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);

  /* ── Z-index layers ──────────────────────────────────────────────────── */
  --z-base:     1;
  --z-nav:     100;
  --z-dropdown: 200;
  --z-modal:   300;
  --z-toast:   400;
}