/* ============================================================
   thuisbatterijinstallateurs.nl — Design tokens
   Drop-in for a classic PHP WordPress theme.
   Import at the top of style.css:  @import "assets/tokens.css";
   Light theme = :root. Dark theme toggles via <html data-theme="dark">
   (or [data-theme="dark"] on any wrapper). Every value below is used
   verbatim in the HTML design reference.
   ============================================================ */

:root {
  /* Trust blue — the identity, not just an accent */
  --blue-900:#0F2F78;
  --blue-800:#12388F;
  --blue-700:#1553B0;   /* primary */
  --blue-600:#1E62C7;
  --blue-100:#E7EEF9;
  --blue-050:#F1F5FC;

  /* Ink (cool, blue-tinted — never pure black/grey) */
  --ink:#101B33;
  --ink-2:#42506C;
  --ink-3:#6E7A93;

  /* Hairlines & surfaces */
  --line:#DCE3EF;
  --line-strong:#C4CEDE;
  --bg:#F3F6FB;
  --surface:#FFFFFF;
  --surface-2:#F8FAFD;

  /* Energy accent — "charged battery" green. Score/verification ONLY. */
  --green:#2E7D57;
  --green-ink:#1E5C3E;
  --green-tint:#E5F0EA;
  --amber:#B7791F;

  /* Standout CTA — warm amber/orange, deliberately NOT the theme blue, so
     primary actions pop against the cool-blue palette.
     11-08-2026, tweede ronde: #B7500F -> #C2570F -> #EA6A0A op uitdrukkelijk
     verzoek van Rowan om echt fel oranje. Bewuste afweging, met de cijfers erbij:
     wit label van 14px op #EA6A0A is 3,20:1, en de WCAG-norm voor gewone tekst is
     4,5:1. Het haalt dus AA NIET; het blijft wel boven de 3,0-vloer die voor grote
     tekst en voor UI-onderdelen geldt, en dat is de reden dat de reeks hier stopt
     en niet bij #F2760F (2,85). Twee manieren om het alsnog compliant te maken als
     dat ooit moet: label donker maken (#EA6A0A met --ink is 5,35:1) of het label
     naar 19px/700 brengen, want dan geldt de 3,0-grens formeel.
     Hover donkerder dan de rustkleur (3,93:1), zodat de knop bij aanwijzen niet
     lichter lijkt te worden. */
  --cta:#EA6A0A;
  --cta-hover:#D25E09;

  /* Context-redefinable accent (override per section if needed) */
  --accent:var(--blue-700);

  /* Radii — minimal / degelijk, no rounded-lg everywhere */
  --radius:5px;
  --radius-lg:8px;

  --shadow:0 1px 2px rgba(16,27,51,.05), 0 8px 28px -18px rgba(16,27,51,.25);

  /* Spacing scale (px) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:44px; --s8:56px;

  /* Type */
  --font-display:'Bricolage Grotesque', Georgia, serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --maxw:1180px;
}

[data-theme="dark"] {
  --blue-900:#0A1E4E;
  --blue-800:#123273;
  --blue-700:#3D7BDB;
  --blue-600:#5A93E8;
  --blue-100:#16233D;
  --blue-050:#101B30;

  --ink:#E9EEF8;
  --ink-2:#AEBACF;
  --ink-3:#7E8BA3;

  --line:#22304A;
  --line-strong:#33445F;
  --bg:#0A101E;
  --surface:#111A2C;
  --surface-2:#0E1626;

  --green:#4FB07F;
  --green-ink:#8FD3AE;
  --green-tint:#13241C;
  --amber:#D9A441;

  /* Zelfde felle oranje als het lichte thema (#EA6A0A). Op de donkere vlakken hier
     is het randcontrast juist beter dan in het lichte thema (3,3:1 tegen de blauwe
     hero), dus die kant zit goed; de beperking zit in het witte label, zie de
     toelichting bij het lichte thema. */
  --cta:#EA6A0A;
  --cta-hover:#D25E09;

  --accent:var(--blue-700);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.6);
}

/* Base reset + fonts (mirror of the design's <helmet>) */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
::selection{ background:#c9dcf7; }

/* Tabular numerals for every score / price / count */
.tab-nums{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* Lettertypen staan zelf-gehost in assets/fonts.css (@font-face + woff2 in
   assets/fonts/). Niet terugzetten naar fonts.googleapis.com: dat stuurt het
   IP van elke bezoeker naar Google voordat er toestemming is gegeven. */