/* ============================================================
   tokens.css — Design tokens · Premium Liquid Glass
   Huize Priester Energiedashboard
   Dark (default) + Light mode
   ============================================================ */

:root {
  /* ── Achtergronden (near-black, dark default) ─────────── */
  --bg:           #0a0a0f;
  --bg-raised:    #0d0d14;
  --bg-sunken:    #070709;

  /* ── Glass-oppervlakken ───────────────────────────────── */
  --surface:        rgba(255,255,255,0.04);
  --surface2:       rgba(255,255,255,0.06);
  --glass-bg:       rgba(255,255,255,0.04);
  --glass-bg-hover: rgba(255,255,255,0.07);
  --glass-grad:     linear-gradient(160deg, rgba(255,255,255,0.065), rgba(255,255,255,0.02));
  --border:         rgba(255,255,255,0.07);
  --border2:        rgba(255,255,255,0.12);
  --hairline:       rgba(255,255,255,0.04);

  /* ctrl-bg (sidebar, inputs) */
  --ctrl-bg: rgba(255,255,255,0.03);

  /* ── Tekst ────────────────────────────────────────────── */
  --text:   #f2f2f6;
  --muted:  #a1a1aa;
  --dim:    #71717a;
  --faint:  #52525b;

  /* ── Accenten: 3 + semantisch rood ───────────────────── */
  --blue:          #3b82f6;
  --blue-soft:     rgba(59,130,246,0.14);
  --blue-border:   rgba(59,130,246,0.35);
  --blue-glow:     rgba(59,130,246,0.45);

  --emerald:       #10b981;
  --emerald-soft:  rgba(16,185,129,0.14);
  --emerald-border:rgba(16,185,129,0.35);
  --emerald-glow:  rgba(16,185,129,0.45);

  --amber:         #f59e0b;
  --amber-soft:    rgba(245,158,11,0.14);
  --amber-border:  rgba(245,158,11,0.35);
  --amber-glow:    rgba(245,158,11,0.45);

  --danger:        #ef4444;
  --danger-soft:   rgba(239,68,68,0.14);
  --danger-border: rgba(239,68,68,0.35);
  --danger-glow:   rgba(239,68,68,0.40);

  --batt:   #8b5cf6;
  --gas:    #fb7185;
  --home:   #38bdf8;
  --ev:     #84cc16;

  /* ── Typografie ───────────────────────────────────────── */
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-ui:   var(--sans);
  --font-mono: var(--mono);

  /* Type-schaal */
  --fs-hero:    56px;
  --fs-kpi:     30px;
  --fs-kpi-sm:  24px;
  --fs-title:   15px;
  --fs-body:    13px;
  --fs-label:   12px;
  --fs-micro:   11px;
  --fs-mono-uc: 10px;
  --fs-sec:     13px;
  --fs-nav:     12px;
  --fs-sub:     12px;
  --fw-kpi:     500;
  --fw-sec:     600;
  --fw-nav-active: 600;

  /* ── Radii ────────────────────────────────────────────── */
  --r-xs:  6px;
  --rs:    10px;
  --r:     14px;
  --r-lg:  20px;
  --r-pill:999px;

  /* ── Blur ─────────────────────────────────────────────── */
  --blur-subtle: 8px;
  --blur-card:   20px;
  --blur-strong: 40px;

  /* ── Spacing ──────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* ── Schaduwen + accent-glow (dark) ──────────────────── */
  --shadow-card: 0 16px 40px -20px rgba(0,0,0,0.75),
                 inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-pop:  0 24px 60px -24px rgba(0,0,0,0.85),
                 inset 0 1px 0 rgba(255,255,255,0.08);

  --glow-blue:    0 0 0 1px var(--blue-border),    0 8px 32px -8px var(--blue-glow);
  --glow-emerald: 0 0 0 1px var(--emerald-border), 0 8px 32px -8px var(--emerald-glow);
  --glow-amber:   0 0 0 1px var(--amber-border),   0 8px 32px -8px var(--amber-glow);
  --glow-danger:  0 0 0 1px var(--danger-border),  0 8px 32px -8px var(--danger-glow);

  /* Glass anatomy compat */
  --glass-border:     1px solid var(--border);
  --glass-inset:      inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-accent-w:   2.5px;
  --glass-hover-lift: translateY(-2px);

  /* ── Chart-tokens ─────────────────────────────────────── */
  --chart-grid: rgba(255,255,255,0.05);
  --chart-tick: #71717a;

  /* ── Transition ───────────────────────────────────────── */
  --transition: 180ms cubic-bezier(.4,0,.2,1);
}

/* ── Delta badges — kleur tokens ── */
.delta-pos {
  color: #34d399;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.25);
}
.delta-neg {
  color: #f87171;
  background: rgba(248,113,133,.12);
  border: 1px solid rgba(248,113,133,.25);
}