/**
 * Energy Dashboards Design Token System
 * "Dark Biophilic Tech" — precision industrial meets living natural systems
 */

:root {
  /* ── Backgrounds — deep, organic darks. Not pure black. ─────────────── */
  --bg-void:        #080c0a;   /* page background — near-black with green undertone */
  --bg-surface:     #0e1512;   /* card surfaces */
  --bg-elevated:    #141d19;   /* modals, dropdowns */
  --bg-border:      #1e2e28;   /* subtle borders */
  --bg-hover:       #1a2821;   /* hover state on interactive elements */
  --bg-input:       #0b1410;   /* form inputs */

  /* ── Primary accent — bioluminescent green ───────────────────────────── */
  --green-bright:   #00e87a;   /* active states, generating indicators */
  --green-mid:      #00b85e;   /* secondary accents */
  --green-dim:      #00663a;   /* muted / disabled */
  --green-glow:     rgba(0, 232, 122, 0.15);   /* glow effects */
  --green-glow-sm:  rgba(0, 232, 122, 0.08);   /* subtle glow */
  --green-glow-lg:  rgba(0, 232, 122, 0.25);   /* intense glow */

  /* ── Energy state colours ────────────────────────────────────────────── */
  --solar:          #f0c040;   /* warm amber — sunlight */
  --solar-dim:      #9a7820;
  --solar-glow:     rgba(240, 192, 64, 0.12);
  --battery-charge: #4da6ff;   /* cool blue — stored energy */
  --battery-drain:  #ff8c42;   /* warm orange — releasing energy */
  --battery-glow:   rgba(77, 166, 255, 0.12);
  --grid-import:    #ff4d6d;   /* red — pulling from grid */
  --grid-export:    #00e87a;   /* green — pushing to grid */
  --grid-glow:      rgba(255, 77, 109, 0.12);
  --ev:             #38d9f5;   /* cyan — electric vehicles */
  --ev-glow:        rgba(56, 217, 245, 0.12);
  --heating:        #ff6b8a;   /* rose — thermal */
  --heating-glow:   rgba(255, 107, 138, 0.12);
  --consumption:    #7a9e90;   /* muted teal — general consumption */

  /* ── Status colours ──────────────────────────────────────────────────── */
  --status-active:  #00e87a;
  --status-warn:    #f0c040;
  --status-error:   #ff4d6d;
  --status-neutral: #7a9e90;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --text-primary:   #e8f5f0;   /* near-white with green tint */
  --text-secondary: #7a9e90;   /* muted */
  --text-dim:       #3d5e52;   /* very muted */
  --text-inverse:   #080c0a;   /* dark text on light backgrounds */

  /* ── Data readout colour ─────────────────────────────────────────────── */
  --readout:        #00e87a;
  --readout-dim:    #00b85e;

  /* ── Fonts ───────────────────────────────────────────────────────────── */
  --font-display: 'Syne', sans-serif;          /* headings, site names */
  --font-data:    'Azeret Mono', monospace;    /* kW values, timestamps */
  --font-body:    'DM Sans', sans-serif;       /* body, UI labels */

  /* ── 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: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--bg-border);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--green-dim), 0 0 24px var(--green-glow-sm);
  --shadow-glow:  0 0 32px var(--green-glow);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.8);

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