/* Huisstijl HelderTarief: tokens (licht en donker), lettertype en logo.
   Bron: merk/tokens.json en merk/merkboek.md. Dit bestand wordt op elke pagina vóór de paginastijl geladen. */

/* ---------- Lettertype: Figtree, zelf gehost (SIL Open Font License, zie fonts/Figtree-OFL.txt) ---------- */
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-variabel.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-cursief-variabel.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --surface: #F7F9F8;
  --card: #FFFFFF;
  --ink: #10232A;
  --muted: #5A6B70;
  --line: #DCE3E2;
  --brand: #0B5563;
  --on-brand: #FFFFFF;
  --stroom: #F2B705;
  --stroom-ink: #8A6400;
  --gas: #E8603C;
  --gas-ink: #B23E1E;
  --eerlijk: #1F7A4D;
  /* buiten het merkpalet: alleen voor fouten en nadelen (duurder, bijbetalen), nooit voor gas */
  --nadeel: #B42318;
  --logo-vlak: #FFFFFF; /* logo's van leveranciers staan altijd op wit */

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --font-sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --klein: 14px; /* kleinste tekst op de site */

  /* lichte tinten van de merkkleuren, voor vlakken achter tekst */
  --tint-brand: color-mix(in srgb, var(--brand) 9%, var(--card));
  --tint-stroom: color-mix(in srgb, var(--stroom) 14%, var(--card));
  --tint-gas: color-mix(in srgb, var(--gas) 12%, var(--card));
  --tint-eerlijk: color-mix(in srgb, var(--eerlijk) 10%, var(--card));
  --brand-lijn: color-mix(in srgb, var(--brand) 35%, var(--card));
  --stroom-lijn: color-mix(in srgb, var(--stroom) 45%, var(--card));
  --muted-licht: color-mix(in srgb, var(--muted) 55%, var(--card));

  /* namen die de paginastijlen al gebruikten */
  --inkt: var(--ink);
  --tekst2: var(--muted);
  --lijn: var(--line);
  --vlak: var(--surface);
  --accent: var(--brand);
  --geel: var(--stroom);
  --radius: var(--radius-md);
  --top: 3.25rem;

  /* uitkomsten van controles en vergelijkingen */
  --ok: var(--eerlijk);
  --gewijzigd: var(--brand);
  --let-op-kleur: var(--stroom-ink);
  --fout: var(--nadeel);
  --geen: var(--line);
  --plus: var(--eerlijk);
  --min: var(--nadeel);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0D1B1F;
    --card: #142A30;
    --ink: #EEF4F3;
    --muted: #9DB0B3;
    --line: #24414A;
    --brand: #4FB3C2;
    --on-brand: #0D1B1F;
    --stroom: #F7C948;
    --stroom-ink: #F7C948;
    --gas: #F08A68;
    --gas-ink: #F08A68;
    --eerlijk: #5CC08A;
    --nadeel: #F28B82;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #0D1B1F;
  --card: #142A30;
  --ink: #EEF4F3;
  --muted: #9DB0B3;
  --line: #24414A;
  --brand: #4FB3C2;
  --on-brand: #0D1B1F;
  --stroom: #F7C948;
  --stroom-ink: #F7C948;
  --gas: #F08A68;
  --gas-ink: #F08A68;
  --eerlijk: #5CC08A;
  --nadeel: #F28B82;
  color-scheme: dark;
}

/* ---------- Basis: tekst 17px, niets kleiner dan 14px ---------- */
html { font-size: 17px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 26px;
  color: var(--ink);
  background: var(--surface);
}
h1 { margin: 0 0 0.5rem; font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.01em; }
h2 { margin: 2rem 0 0.5rem; font-size: 24px; line-height: 30px; font-weight: 700; }
h3 { margin: 1.25rem 0 0.4rem; font-size: 19px; line-height: 26px; font-weight: 700; }
small, .noot, .klein { font-size: var(--klein); line-height: 20px; }
a { color: var(--brand); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 40rem) {
  h1 { font-size: 28px; line-height: 34px; }
}

/* ---------- Bovenbalk met logo ---------- */
.topbalk {
  min-height: var(--top);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.25rem;
  background: var(--card);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.merk { display: inline-flex; align-items: center; font-weight: 800; }
.merk-link { color: inherit; text-decoration: none; }
.logo-merk { display: block; height: 32px; width: auto; }
.logo-merk text { font-family: var(--font-sans); }
.l-stroom { fill: var(--stroom); }
.l-gas { fill: var(--gas); }
.l-brand { fill: var(--brand); }
.l-helder { font-weight: 800; fill: var(--ink); }
.l-tarief { font-weight: 500; fill: var(--brand); }
.badge { padding: 0.1rem 0.6rem; border-radius: var(--radius-pill); background: var(--stroom); color: #10232A; font-size: var(--klein); font-weight: 700; }
.topbalk-nav { margin-left: auto; display: flex; gap: 1.1rem; }
.topbalk-link { color: var(--brand); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.topbalk-link[aria-current="page"] { color: var(--ink); text-decoration: none; padding-bottom: 0.1rem; border-bottom: 2px solid var(--brand); }