/* Light-theme defaults. Dark mode overrides live under [data-theme="dark"] below.
   Components should consume semantic tokens so pages, dialogs, sheets, dropdowns,
   tooltips and toasts render in both themes without page-specific color forks. */
:root {
    --font-sans: 'Geist';
    --font-display: 'Geist';
    --font-mono: 'Geist Mono';
    --color-bg: #f7f8fa;
    --color-bg-alt: #ffffff;
    --color-bg-soft: #f2f4f7;
    --color-bg-deep: #eef0f5;
    --color-surface: #ffffff;
    --color-surface-strong: #ffffff;
    --color-line: #e6e8ee;
    --color-line-strong: #d4d8e0;
    --color-text: #1a1f2e;
    --color-text-soft: #3d4456;
    --color-text-muted: #5f6675;
    --color-text-faint: #626b7a;
    /* AA-compliant "text" variants of accents for use on their -soft backgrounds */
    --color-solar-text:    #b45309;
    --color-energy-text:   #047857;
    --color-water-text:    #0369a1;
    --color-pool-text:     #0e7490;
    --color-climate-text:  #be185d;
    --color-heatpump-text: #6d28d9;
    --color-garden-text:   #4d7c0f;
    --color-clean-text:    #0f766e;
    --color-tado-text:     #be123c;
    --color-unifi-text:    #0369a1;
    --color-success-text:  #047857;
    --color-warning-text:  #9a3412;
    --color-error-text:    #b91c1c;
    --color-success: #059669;
    --color-success-soft: #d1fae5;
    --color-success-rgb: 5, 150, 105;
    /* Caution orange — split off solar amber so brand/active/affirmative and
       stale/caution are no longer the same hue. Affirmative consumers that
       used to ride --color-warning (slider thumb, slider-confirm-ok, /modi +
       /verblijven amber theme) were rewired to --color-solar in the same pass. */
    --color-warning: #c2410c;
    --color-warning-soft: #ffedd5;
    --color-warning-rgb: 194, 65, 12;
    --color-error: #b91c1c;
    --color-error-soft: #fee2e2;
    --color-error-rgb: 185, 28, 28;
    /* "Beyond danger" — over-budget allowance bar, deeper than --color-error. */
    --color-error-strong: #7f1d1d;
    /* Info/accent blue (used for schedule pills, stale banners, links) — no token existed. */
    --color-info: #3b82f6;
    --color-info-rgb: 59, 130, 246;
    --color-info-soft: rgba(59, 130, 246, 0.14);
    --color-solar: #d97706;
    --color-solar-soft: #fef3c7;
    --color-energy: #059669;
    --color-energy-soft: #d1fae5;
    --color-water: #0369a1;
    --color-water-soft: #e0f2fe;
    --color-pool: #0891b2;
    --color-pool-soft: #cffafe;
    --color-climate: #be185d;
    --color-climate-soft: #fce7f3;
    --color-heatpump: #6d28d9;
    --color-heatpump-soft: #ede9fe;
    --color-tado: #e11d48;
    --color-tado-soft: #ffe4e6;
    --color-tado-rgb: 225, 29, 72;
    --color-unifi: #0288d1;
    --color-unifi-soft: #e0f2fe;
    --color-unifi-rgb: 2, 136, 209;
    --color-garden: #65a30d;
    --color-garden-soft: #ecfccb;
    --color-garden-rgb: 101, 163, 13;
    --color-clean: #0d9488;
    --color-clean-soft: #ccfbf1;
    --color-clean-rgb: 13, 148, 136;
    /* Gas/flame accent (Tado gas card) — a warm orange data class, distinct from
       --color-solar amber and --color-tado coral. */
    --color-gas: #fb923c;
    --improvements: #5b6f9c;
    --improvements-text: #41527a;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    /* Canonical responsive breakpoints — prefer these in new code over ad-hoc px values.
       The codebase has 18 distinct max-widths historically; these four cover the meaningful
       layout cliffs. Existing media queries are not migrated en masse — only consolidate
       outliers when adjacent rules already use the canonical token. */
    --bp-xl: 1380px;
    --bp-lg: 1100px;
    --bp-md: 768px;
    --bp-sm: 480px;
    /* Canonical type ramp — prefer these in new code over ad-hoc font-size values.
       web/ historically carries 600+ font-size decls across ~30 near-duplicate
       values; these ten steps map to the dominant clusters. Existing rules are
       NOT migrated en masse (same policy as --radius-* / --bp-*) — adopt a token
       when you touch a rule or build a new surface. */
    --fs-2xs:  0.68rem;  /* micro labels, dense chips */
    --fs-xs:   0.72rem;  /* eyebrow / small caption */
    --fs-sm:   0.78rem;  /* caption, secondary row text (most common cluster) */
    --fs-md:   0.82rem;  /* small body */
    --fs-base: 0.85rem;  /* body */
    --fs-lg:   0.9rem;   /* emphasised body */
    --fs-xl:   1rem;     /* subhead */
    --fs-2xl:  1.1rem;   /* card title */
    --fs-3xl:  1.3rem;   /* section heading */
    --fs-4xl:  2rem;     /* display / big number */
    --tracking-eyebrow: 0.18em;  /* uppercase eyebrow letter-spacing */
    /* Spacing scale — 8px-based rhythm. Prefer over ad-hoc px gaps/padding in new
       code (same "adopt on touch" policy as --radius-* / --fs-* scales); the historical
       2-28px gap/padding continuum is NOT migrated en masse. */
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs:  6px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;
    --space-2xl: 32px;
    /* Amber-weight variants for scenarios where --color-warning-soft (0.15) is too heavy
       (-faint, e.g. nav cooldown chips at rest) or too light (-strong, hero unavailable
       state borders). Use the existing --color-warning-soft for default tints. */
    --color-warning-soft-faint:  rgba(194, 65, 12, 0.07);
    --color-warning-soft-strong: rgba(194, 65, 12, 0.28);
    --topbar-height: 56px;
    --sidebar-width: 252px;
    --shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);
    --shadow-panel: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
    --shadow-card: 0 2px 8px rgba(17, 24, 39, 0.08), 0 1px 4px rgba(17, 24, 39, 0.05);
    --color-focus-ring: rgba(217, 119, 6, 0.35);
    --color-focus-outline: rgba(217, 119, 6, 0.6);
    /* RGB triplets for components that need rgba() alpha variants */
    --color-solar-rgb:         217, 119, 6;
    --color-water-rgb:         3, 105, 161;
    --color-pool-rgb:          8, 145, 178;
    --color-heatpump-rgb:      109, 40, 217;
    /* Light accent variants — for text/borders on very dark (near-black) surfaces */
    --color-info-light-rgb:    96, 165, 250;   /* blue-400 — for wifi badge text */
    --color-success-bright-rgb: 74, 222, 128;  /* green-400 — for lan badge text */
    --color-heatpump-light-rgb: 192, 132, 252; /* purple-400 — for vpn badge text */
    --color-water-light-rgb:   100, 160, 255;  /* bright blue — for action button highlights */
    --color-error-light-rgb:   248, 113, 113;  /* red-400 — for danger button highlights */
    /* Dark mobile shell — navy surfaces used by tabbar, sticky topbar, chart cards,
       fullscreen sheets. These are intentional dark elements within the light page theme. */
    --color-shell-900:         rgba(4, 9, 20, 1);
    --color-shell-800:         rgba(7, 17, 31, 1);
    --color-shell-700:         rgba(12, 24, 44, 1);
    --color-shell-scrim-light: rgba(17, 24, 39, 0.35); /* sidebar drawer scrim */
    --color-shell-scrim:       rgba(4, 9, 20, 0.50);   /* mobile nav scrim */
    --color-shell-modal:       rgba(4, 9, 20, 0.78);   /* modal backdrop */
    --color-shell-backdrop:    rgba(2, 6, 23, 0.76);   /* graph sheet backdrop */
    --color-shell-tabbar:      rgba(7, 17, 31, 0.96);  /* bottom tabbar */
    --color-shell-topbar:      rgba(7, 17, 31, 0.97);  /* sticky topbar at ≤640px */
    --color-shell-chart-start: rgba(12, 24, 44, 0.98); /* mobile chart card gradient start */
    --color-shell-chart-end:   rgba(7, 16, 31, 0.96);  /* mobile chart card gradient end */
    --color-shell-graph-bg:    rgba(4, 10, 21, 0.72);  /* graph scroll inner overlay */
    --color-shell-fullscreen:  rgba(7, 17, 31, 0.99);  /* fullscreen chart sheet */
    --color-shell-toast:       rgba(15, 24, 40, 0.96); /* sw-update toast + similar floating chips */
    --color-shell-list:        rgba(30, 41, 59, 0.55); /* unifi device list tinted bg */
    --color-shell-list-header: rgba(15, 23, 42, 0.35); /* unifi device group header */
    /* Text and borders for use ON dark shell surfaces (contrast-safe) */
    --color-text-on-shell:        rgba(255, 255, 255, 0.92);
    --color-text-muted-on-shell:  rgba(255, 255, 255, 0.55);
    --color-text-faint-on-shell:  rgba(255, 255, 255, 0.35);
    --color-line-on-shell:        rgba(255, 255, 255, 0.10);
    /* Theme-aware content surfaces for heroes, chart cards, and flow canvases.
       True shell chrome (tabbar, scrims, modal backdrops) keeps the shell tokens. */
    --color-content-surface:       color-mix(in srgb, var(--color-bg-alt) 94%, var(--color-bg-soft));
    --color-content-line:          var(--color-line);
    --color-content-text:          var(--color-text);
    --color-content-text-muted:    var(--color-text-muted);
    --color-content-text-faint:    var(--color-text-faint);
    --color-content-chip-bg:       color-mix(in srgb, var(--color-text) 4%, transparent);
    --color-content-chart-start:   color-mix(in srgb, var(--color-bg-alt) 94%, var(--color-bg-soft));
    --color-content-chart-end:     color-mix(in srgb, var(--color-bg-soft) 88%, var(--color-bg-alt));
    --color-content-graph-bg:      color-mix(in srgb, var(--color-bg-alt) 86%, var(--color-bg-soft));
    /* Chart palette (see web/js/utils/chart.js — mirror these in JS too). */
    --chart-solar:            #fbbf24;
    --chart-solar-rgb:        251, 191, 36;
    --chart-solar-bright:     #fcd34d;         /* lighter yellow for text on dark shell */
    --chart-loads:            #818cf8;
    --chart-loads-rgb:        129, 140, 248;
    --chart-feedin:           #34d399;
    --chart-grid-import:      #60a5fa;
    --chart-battery:          #a78bfa;
    --chart-directload:       #f59e0b;
    --chart-axis-rgb:         148, 163, 184;
    /* Dim variants for past/future bars in month charts */
    --chart-solar-past:       rgba(251, 191, 36, 0.45);
    --chart-solar-future:     rgba(251, 191, 36, 0.10);
    --chart-directload-past:  rgba(245, 158, 11, 0.65);
    --chart-loads-past:       rgba(129, 140, 248, 0.70);
    --chart-feedin-past:      rgba(52, 211, 153, 0.55);
    --chart-battery-charged:  #60a5fa;
    /* Semantic axis/gridline tokens — all built on --chart-axis-rgb so re-theming
       the chart framework requires changing only the triplet. Use via
       `style="fill: var(--chart-axis-label)"` in Vue templates (SVG attr can't take var()). */
    --chart-axis-grid:        rgba(148, 163, 184, 0.10); /* minor gridlines */
    --chart-axis-grid-base:   rgba(148, 163, 184, 0.18); /* chart baseline */
    --chart-axis-unit:        rgba(148, 163, 184, 0.40); /* unit labels (kW, kWh, %, ms) */
    --chart-axis-label-dim:   rgba(148, 163, 184, 0.45); /* time tick labels */
    --chart-axis-empty:       rgba(148, 163, 184, 0.50); /* empty-state "niet beschikbaar" text */
    --chart-axis-label:       rgba(148, 163, 184, 0.55); /* y-tick labels */
    --chart-axis-marker:      rgba(148, 163, 184, 0.60); /* "Nu" marker text */
    --chart-axis-now:         rgba(148, 163, 184, 0.30); /* "Nu" dashed line */
    --chart-axis-now-strong:  rgba(148, 163, 184, 0.70); /* "Nu" tick label emphasis */
    --chart-axis-midnight:    rgba(148, 163, 184, 0.65); /* Midnight tick label */
    /* Text color to pair with accent backgrounds (--color-solar, etc.) */
    --color-on-accent:        #ffffff;
    /* ─── Automation v2 design tokens ──────────────────────────────────── */
    --automation-column-gap: 16px;
    --automation-block-gap: 12px;
    --automation-editor-min-height: 520px;
    --automation-side-rail-width: 320px;
    --automation-node-trigger: var(--color-solar);
    --automation-node-condition: var(--color-heatpump);
    --automation-node-condition-alt: var(--color-pool);
    --automation-node-action: var(--color-energy);
    --automation-node-rollback: var(--color-info);
    --automation-status-idle: var(--color-text-muted);
    --automation-status-active: var(--color-energy);
    --automation-status-cooldown: var(--color-warning);
    --automation-status-blocked: var(--color-error);
    /* Global motion scale — promote the formerly automation-only durations so
       new/edited rules reference one vocabulary (adopt on touch, like --radius-*).
       prefers-reduced-motion is still neutralized by the global * reset. */
    --motion-fast: 140ms ease-out;
    --motion-base: 180ms ease-out;
    --motion-slow: 220ms ease-out;
    --automation-transition-fast: var(--motion-fast);
    --automation-transition-medium: var(--motion-base);
    /* ─── AuDHD staging overlay aliases ────────────────────────────────────
       The audhd-*.css overlays use these custom names; map them onto the
       canonical tokens so light/dark theming flows through automatically. */
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-soft);
    --text-tertiary: var(--color-text-muted);
    --surface-1: var(--color-surface);
    --surface-2: var(--color-surface-strong);
    --surface-3: var(--color-bg-soft);
    --accent: var(--color-info);
    /* ─── Stays / verblijven page aliases (map to canonical tokens so both themes work) */
    --amber: var(--color-solar);
    --green: var(--color-success);
    --blue: var(--color-info);
    --card-bg: var(--color-surface);
    --border-color: var(--color-line-strong);
    --color-surface-elevated: var(--color-surface-strong);
    --color-border: var(--color-line);
    /* Canonical card surface — the Zwembadlogica (.pool-shelly-logic-card)
       treatment promoted to one token so every card shares it. Auto-themes
       via --color-bg-alt. Change card color app-wide here. */
    --color-card: color-mix(in srgb, var(--color-bg-alt) 82%, transparent);
}

/* ─── Dark theme token overrides ─────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg:             #0b1120;
    --color-bg-alt:         #111827;
    --color-bg-soft:        #1e293b;
    --color-bg-deep:        #070b15;
    --color-surface:        #172033;
    --color-surface-strong: #1e2a3a;
    /* Cards lift off the navy plane on dark — bind to the brighter surface;
       the :root flat 82%-bg-alt fill resolves ~bg-identical on the dark bg,
       so cards read as wireframe outlines without it. Light theme keeps its
       translucent fill (already separates via real shadow on the pale bg). */
    --color-card:           var(--color-surface);
    --color-line:           rgba(148, 163, 184, 0.12);
    --color-line-strong:    rgba(148, 163, 184, 0.22);
    --color-text:           #f1f5f9;
    --color-text-soft:      #cbd5e1;
    --color-text-muted:     #94a3b8;
    --color-text-faint:     #8b97a8; /* lifted from #64748b: slate-500 failed WCAG AA (3.05:1) on dark surfaces; muted stays a step brighter */
    /* AA-compliant text on dark "-soft" tint backgrounds */
    --color-solar-text:    #fbbf24;
    --color-energy-text:   #34d399;
    --color-water-text:    #38bdf8;
    --color-pool-text:     #22d3ee;
    --color-climate-text:  #f472b6;
    --color-heatpump-text: #a78bfa;
    --color-garden-text:   #bef264;
    --color-clean-text:    #5eead4;
    --color-tado-text:     #fb7185;
    --color-unifi-text:    #4fc3f7;
    --color-success-text:  #34d399;
    --color-warning-text:  #fdba74;
    --color-error-text:    #f87171;
    /* Service accent colors — 400-tier for WCAG AA on dark backgrounds */
    --color-energy:   #34d399;
    --color-water:    #38bdf8;
    --color-pool:     #22d3ee;
    --color-heatpump: #a78bfa;
    --color-climate:  #f472b6;
    --color-garden:   #a3e635;
    --color-clean:    #2dd4bf;
    /* solar/tado/unifi were missing dark overrides — accent fell through to the light
       600-tier while their -text/-soft variants brightened, showing two hues at once */
    --color-solar:    #fbbf24;
    --color-tado:     #fb7185;
    --color-unifi:    #4fc3f7;
    /* Status colors — 400-tier for WCAG AA on dark backgrounds */
    --color-success: #34d399;
    --color-warning: #fb923c;
    --color-error:   #f87171;
    /* Status soft backgrounds — tinted from 400-tier accents */
    --color-success-soft: rgba(52, 211, 153, 0.15);
    --color-warning-soft: rgba(251, 146, 60, 0.15);
    --color-warning-soft-faint:  rgba(251, 146, 60, 0.07);
    --color-warning-soft-strong: rgba(251, 146, 60, 0.28);
    --color-error-soft:   rgba(248, 113, 113, 0.18);
    /* Service soft backgrounds — tinted from 400-tier accents */
    --color-solar-soft:    rgba(251, 191, 36, 0.15);
    --color-energy-soft:   rgba(52, 211, 153, 0.15);
    --color-water-soft:    rgba(56, 189, 248, 0.15);
    --color-pool-soft:     rgba(34, 211, 238, 0.15);
    --color-climate-soft:  rgba(244, 114, 182, 0.15);
    --color-heatpump-soft: rgba(167, 139, 250, 0.15);
    --color-tado-soft:     rgba(251, 113, 133, 0.18);
    --color-unifi-soft:    rgba(79, 195, 247, 0.15);
    --color-garden-soft:   rgba(163, 230, 53, 0.16);
    --color-clean-soft:    rgba(45, 212, 191, 0.16);
    --improvements: #8aa1d4;
    --improvements-text: #8aa1d4;
    /* Info blue — brighter for legibility on dark bg */
    --color-info:    #60a5fa;
    --color-info-rgb: 96, 165, 250;
    --color-info-soft: rgba(96, 165, 250, 0.15);
    /* RGB triplets updated to match overridden accent/status colors */
    --color-success-rgb:  52, 211, 153;
    --color-water-rgb:    56, 189, 248;
    --color-pool-rgb:     34, 211, 238;
    --color-heatpump-rgb: 167, 139, 250;
    --color-garden-rgb:   163, 230, 53;
    --color-clean-rgb:    45, 212, 191;
    --color-warning-rgb:  251, 146, 60;
    /* dark override — was falling through to the light ochre triplet (217,119,6),
       so rgba(var(--color-solar-rgb)) tints rendered muddy on dark. */
    --color-solar-rgb:    251, 191, 36;
    --color-error-rgb:    248, 113, 113;
    --color-error-strong: #dc2626;
    --color-tado-rgb:     251, 113, 133;
    --color-unifi-rgb:    79, 195, 247;
    /* Shadows — stronger on dark (no ambient light context) */
    --shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.50);
    --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.40);
    --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.40);
    /* Focus ring — amber-400 tuned for dark backgrounds */
    /* WCAG 2.4.11: focus indicator must have ≥3:1 contrast against adjacent surfaces */
    --color-focus-ring:    rgba(251, 191, 36, 0.55);
    --color-focus-outline: rgba(251, 191, 36, 0.55);
    /* Shell — shift darker since page bg is now navy; maintain visual hierarchy */
    --color-shell-900:         rgba(2, 5, 14, 1);
    --color-shell-800:         rgba(4, 9, 20, 1);
    --color-shell-700:         rgba(7, 17, 31, 1);
    --color-shell-scrim-light: rgba(0, 0, 0, 0.45);
    --color-shell-scrim:       rgba(0, 0, 0, 0.60);
    --color-shell-modal:       rgba(0, 0, 0, 0.82);
    --color-shell-backdrop:    rgba(0, 0, 0, 0.80);
    --color-shell-tabbar:      rgba(4, 9, 20, 0.97);
    --color-shell-topbar:      rgba(4, 9, 20, 0.98);
    --color-shell-chart-start: rgba(7, 16, 31, 0.99);
    --color-shell-chart-end:   rgba(4, 9, 20, 0.97);
    --color-shell-graph-bg:    rgba(2, 6, 14, 0.78);
    --color-shell-fullscreen:  rgba(4, 9, 20, 1);
    --color-shell-toast:       rgba(4, 9, 20, 0.97);
    --color-shell-list:        rgba(15, 23, 42, 0.70);
    --color-shell-list-header: rgba(7, 14, 28, 0.55);
    --color-content-surface:       var(--color-shell-700);
    --color-content-line:          var(--color-line-on-shell);
    --color-content-text:          var(--color-text-on-shell);
    --color-content-text-muted:    var(--color-text-muted-on-shell);
    --color-content-text-faint:    var(--color-text-faint-on-shell);
    --color-content-chip-bg:       rgba(255, 255, 255, 0.05);
    --color-content-chart-start:   color-mix(in srgb, var(--color-shell-chart-start) 92%, var(--color-bg-alt));
    --color-content-chart-end:     color-mix(in srgb, var(--color-shell-chart-end) 88%, var(--color-bg-alt));
    --color-content-graph-bg:      var(--color-shell-graph-bg);
    /* AuDHD overlay aliases — re-mapped under dark theme so they pick up dark values */
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-soft);
    --text-tertiary: var(--color-text-muted);
    --surface-1: var(--color-surface);
    --surface-2: var(--color-surface-strong);
    --surface-3: var(--color-bg-soft);
    --accent: var(--color-info);
    /* Stays aliases — dark overrides so colors remain vibrant on dark bg */
    --amber: var(--color-solar);
    --green: var(--color-success);
    --blue: var(--color-info);
    --card-bg: var(--color-surface);
    --border-color: var(--color-line-strong);
    --color-surface-elevated: var(--color-surface-strong);
    --color-border: var(--color-line);
}