/* ============================================================================
   HeatPump Advisor — Domeinkleuren (Verkenning ronde 5)
   ============================================================================
   Elk *domein* (bouwdeel of installatie-onderdeel) heeft één vaste kleur die
   overal terugkomt: formulier, rapport, berekende bijdragen. Zo herken je in
   "Berekende bijdragen" elke regel aan de kleur die je in het formulier zag.

   Twee tokens per domein — meer is niet nodig:
     --domain-<x>-line   detaillijn + waardetekst (leesbaar: >=4,5:1 op de modus-bg)
     --domain-<x>-fill   vullaag van het icoon (basiskleur, alpha komt uit het recept)

   Tegel-achtergrond en -rand worden hiervan afgeleid met color-mix, zodat er
   per domein maar twee bronwaarden te onderhouden zijn.

   De structuurlijn is NIET per domein: die volgt de modus
   (--domain-structure: ink in light, wit in dark).

   Recept per icoon:
     structuurlijn (85%) · vullaag 14-22% van --domain-*-fill ·
     één detaillijn in --domain-*-line

   Rolkleuren blijven gelden (docs/design-afspraken.md §1): brand-oranje is
   actie & geld, cyaan is uitsluitend scan/live. Domeinkleuren zijn een
   dérde taal — identiteit van een bouwdeel — en horen alleen op iconen en de
   bijbehorende waarde, nooit op knoppen, chips of voortgang.

   Laadvolgorde: ná tokens.css, vóór component-CSS.
   ========================================================================= */

:root {
  /* Structuurlijn — dark is de default (zie tokens.css color-scheme) */
  --domain-structure: rgba(255, 255, 255, 0.92);

  /* ── Domeinen · dark (heldere 400-tint) ───────────────────────────────
     Slug            NL-label in de UI
     electrical      Elektra
     insulation      Isolatie
     floor           Vloer
     roof            Dak
     facade          Gevel
     glazing         Glas
     ventilation     Ventilatie
     emission        Afgifte
     dhw             Tapwater
     thermalbridge   Thermische bruggen
     ------------------------------------------------------------------- */
  --domain-electrical-line: #fbbf24;
  --domain-electrical-fill: rgb(251, 191, 36);

  --domain-insulation-line: #4ade80;
  --domain-insulation-fill: rgb(74, 222, 128);

  --domain-floor-line: #60a5fa;
  --domain-floor-fill: rgb(96, 165, 250);

  --domain-roof-line: #a78bfa;
  --domain-roof-fill: rgb(167, 139, 250);

  --domain-facade-line: #fb923c;
  --domain-facade-fill: rgb(251, 146, 60);

  --domain-glazing-line: #818cf8;
  --domain-glazing-fill: rgb(129, 140, 248);

  --domain-ventilation-line: #2dd4bf;
  --domain-ventilation-fill: rgb(45, 212, 191);

  /* Afgifte = warmte; valt bewust samen met de merkkleur (design-afspraken §1:
     brand-oranje mag warmte dragen). Enige domein zonder eigen hue. */
  --domain-emission-line: var(--accent-orange);
  --domain-emission-fill: var(--accent-orange);

  --domain-dhw-line: #38bdf8;
  --domain-dhw-fill: rgb(56, 189, 248);

  --domain-thermalbridge-line: #f472b6;
  --domain-thermalbridge-fill: rgb(244, 114, 182);
}

/* ── Light — zelfde hue, donkere en leesbare tint ────────────────────────
   De detaillijn moet op #f5f6f8 minstens 4,5:1 halen; daarom schuift de
   line-token fors donkerder, terwijl de fill-token op de heldere hue blijft
   (die wordt immers maar op 14-22% alpha gebruikt).
   ---------------------------------------------------------------------- */
:root[data-theme="light"] {
  --domain-structure: rgba(11, 17, 32, 0.85);

  --domain-electrical-line: #8a6400;
  --domain-electrical-fill: rgb(234, 179, 8);

  --domain-insulation-line: #1e7a44;
  --domain-insulation-fill: rgb(46, 160, 90);

  --domain-floor-line: #1d4ed8;
  --domain-floor-fill: rgb(59, 130, 246);

  --domain-roof-line: #7c3aed;
  --domain-roof-fill: rgb(139, 92, 246);

  --domain-facade-line: #c2410c;
  --domain-facade-fill: rgb(249, 115, 22);

  --domain-glazing-line: #4f46e5;
  --domain-glazing-fill: rgb(99, 102, 241);

  --domain-ventilation-line: #0f766e;
  --domain-ventilation-fill: rgb(20, 184, 166);

  /* Leesbaar oranje — hetzelfde readableTint-principe als
     --accent-orange-readable (~5,3:1 op wit). */
  --domain-emission-line: var(--accent-orange-readable);
  --domain-emission-fill: var(--accent-orange);

  --domain-dhw-line: #0369a1;
  --domain-dhw-fill: rgb(56, 189, 248);

  --domain-thermalbridge-line: #be185d;
  --domain-thermalbridge-fill: rgb(236, 72, 153);
}

/* ── Marketing/SEO/landing blijven dark-locked ───────────────────────────
   Spiegelt de dark-lock uit tokens.css (Fase 4B): staat de gebruiker op
   light maar bekijkt hij een marketingpagina, dan horen de domeinkleuren
   óók terug naar hun dark-tint. Zonder dit blok worden de donkere
   light-lijnen onleesbaar op #05060b.
   ---------------------------------------------------------------------- */
:root[data-theme="light"] body.marketing-page,
:root[data-theme="light"] body.seo-page,
:root[data-theme="light"] body.landing-page {
  --domain-structure: rgba(255, 255, 255, 0.92);

  --domain-electrical-line: #fbbf24;
  --domain-electrical-fill: rgb(251, 191, 36);

  --domain-insulation-line: #4ade80;
  --domain-insulation-fill: rgb(74, 222, 128);

  --domain-floor-line: #60a5fa;
  --domain-floor-fill: rgb(96, 165, 250);

  --domain-roof-line: #a78bfa;
  --domain-roof-fill: rgb(167, 139, 250);

  --domain-facade-line: #fb923c;
  --domain-facade-fill: rgb(251, 146, 60);

  --domain-glazing-line: #818cf8;
  --domain-glazing-fill: rgb(129, 140, 248);

  --domain-ventilation-line: #2dd4bf;
  --domain-ventilation-fill: rgb(45, 212, 191);

  --domain-emission-line: var(--accent-orange);
  --domain-emission-fill: var(--accent-orange);

  --domain-dhw-line: #38bdf8;
  --domain-dhw-fill: rgb(56, 189, 248);

  --domain-thermalbridge-line: #f472b6;
  --domain-thermalbridge-fill: rgb(244, 114, 182);
}

/* ============================================================================
   Icoon-drager
   ============================================================================
   `.hpa-icon` zet de drie CSS-variabelen die de SVG-symbolen consumeren:
   --icon-structure / --icon-fill / --icon-line. Custom properties erven door
   <use> heen, dus één klasse op de <svg> kleurt het hele symbool.

   Gebruik:
     <svg class="hpa-icon hpa-icon--insulation" aria-hidden="true">
       <use href="/assets/icons/hpa-icons.svg#hpa-insulation"></use>
     </svg>

   Zonder domein-modifier valt het icoon terug op de neutrale informatie-rol
   (structuurlijn + merk-vullaag), zoals design-afspraken §2 voorschrijft.
   ========================================================================= */

.hpa-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  display: inline-block;
  vertical-align: middle;
  fill: none;

  --icon-structure: var(--domain-structure);
  --icon-fill: var(--accent-orange);
  --icon-line: var(--accent-orange);
}

:root[data-theme="light"] .hpa-icon {
  --icon-line: var(--accent-orange-readable);
}

:root[data-theme="light"] body.marketing-page .hpa-icon,
:root[data-theme="light"] body.seo-page .hpa-icon,
:root[data-theme="light"] body.landing-page .hpa-icon {
  --icon-line: var(--accent-orange);
}

/* Scan/live blijft cyaan en is géén domein (design-afspraken §1 + §8). */
.hpa-icon--live {
  --icon-fill: var(--accent-cyan);
  --icon-line: var(--accent-cyan);
}

:root[data-theme="light"] .hpa-icon--live {
  --icon-line: var(--accent-cyan-readable);
}

:root[data-theme="light"] body.marketing-page .hpa-icon--live,
:root[data-theme="light"] body.seo-page .hpa-icon--live,
:root[data-theme="light"] body.landing-page .hpa-icon--live {
  --icon-line: var(--accent-cyan);
}

/* Informatierol (design-afspraken §1): geen eigen hue, maar de neutrale
   tekstkleur. Nodig zodra een duotone-icoon op een informatief element staat —
   zonder deze modifier valt zo'n icoon terug op de merkkleur hierboven, en dat
   is precies wat §1 verbiedt. Tegenhanger van `DuotoneRole.info` op iOS;
   toegevoegd 2026-08-18 bij de inbouw, zodat beide platformen dezelfde rollen
   kennen.

   De drie regels zijn géén herhaling: `:root[data-theme="light"] .hpa-icon`
   heeft méér specificiteit dan een kale modifier, en de marketing-lock nog
   meer. Met alleen de eerste regel bleef de lijnkleur in light gewoon
   merk-oranje — gemeten, niet aangenomen. De tokens zelf kantelen al mee
   (tokens.css zet ze onder de lock terug op wit), dus de declaraties zijn
   overal gelijk; het gaat puur om het winnen van de cascade. */
.hpa-icon--info {
  --icon-fill: var(--text-primary);
  --icon-line: var(--text-secondary);
}

:root[data-theme="light"] .hpa-icon--info {
  --icon-line: var(--text-secondary);
}

:root[data-theme="light"] body.marketing-page .hpa-icon--info,
:root[data-theme="light"] body.seo-page .hpa-icon--info,
:root[data-theme="light"] body.landing-page .hpa-icon--info {
  --icon-line: var(--text-secondary);
}

/* Domein-modifiers */
.hpa-icon--electrical    { --icon-fill: var(--domain-electrical-fill);    --icon-line: var(--domain-electrical-line); }
.hpa-icon--insulation    { --icon-fill: var(--domain-insulation-fill);    --icon-line: var(--domain-insulation-line); }
.hpa-icon--floor         { --icon-fill: var(--domain-floor-fill);         --icon-line: var(--domain-floor-line); }
.hpa-icon--roof          { --icon-fill: var(--domain-roof-fill);          --icon-line: var(--domain-roof-line); }
.hpa-icon--facade        { --icon-fill: var(--domain-facade-fill);        --icon-line: var(--domain-facade-line); }
.hpa-icon--glazing       { --icon-fill: var(--domain-glazing-fill);       --icon-line: var(--domain-glazing-line); }
.hpa-icon--ventilation   { --icon-fill: var(--domain-ventilation-fill);   --icon-line: var(--domain-ventilation-line); }
.hpa-icon--emission      { --icon-fill: var(--domain-emission-fill);      --icon-line: var(--domain-emission-line); }
.hpa-icon--dhw           { --icon-fill: var(--domain-dhw-fill);           --icon-line: var(--domain-dhw-line); }
.hpa-icon--thermalbridge { --icon-fill: var(--domain-thermalbridge-fill); --icon-line: var(--domain-thermalbridge-line); }

/* Maten — 4-pt grid (design-afspraken §4) */
.hpa-icon--xs { width: 0.875rem; height: 0.875rem; }  /* 14px — bijschrift */
.hpa-icon--sm { width: 1.25rem; height: 1.25rem; }  /* 20px — lijstrij */
.hpa-icon--md { width: 1.5rem;  height: 1.5rem;  }  /* 24px — standaard */
.hpa-icon--lg { width: 1.75rem; height: 1.75rem; }  /* 28px — tegel */

/* ── Icoon-tegel ────────────────────────────────────────────────────────
   De vierkante drager achter een icoon. Neutraal by default; met een
   domein-modifier op dezelfde node kleurt de tegel mee met dat domein.
   ------------------------------------------------------------------- */
.hpa-icon-tile {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: color-mix(in srgb, var(--icon-fill, var(--accent-orange)) 10%, transparent);
  border: var(--bw-hairline) solid color-mix(in srgb, var(--icon-fill, var(--accent-orange)) 28%, transparent);
}

.hpa-icon-tile--sm { width: 2.5rem; height: 2.5rem; }

/* -------------------------------------------------------------------
   Navigatie-iconen volgen de stand van hun menu-item
   -------------------------------------------------------------------
   De inline SVG's die hier stonden tekenden met stroke="currentColor" en
   erfden dus de kleur van .sidebar-item: grijs in rust, lichter bij hover,
   merk-oranje op de actieve pagina. Een sprite-icoon kleurt via drie custom
   properties en verloor die koppeling — het resultaat stond overal even
   grijs, ook op de pagina waar je was.

   Dit is dezelfde regel als in de iOS-app, waar DuotoneIcon op stand kiest
   tussen role .neutral (merkaccent) en .info (grijs); zie de dashboardtegel
   met overdueFollowUpCount. Kleur is stand, niet categorie.

   De duotone blijft overeind via de vulling: die staat op 18 procent van
   dezelfde kleur, de detaillijn op 74 procent. Structuur en lijn lopen dus
   mee met currentColor zonder dat het icoon vlak wordt.
   ------------------------------------------------------------------- */
.sidebar-item .hpa-icon,
.bottom-nav-item .hpa-icon,
.quick-nav-card .hpa-icon,
.dash-card-icon .hpa-icon,
.preview-label .hpa-icon,
.sidebar-signout-btn .hpa-icon {
  --icon-structure: currentColor;
  --icon-fill: currentColor;
  --icon-line: color-mix(in srgb, currentColor 74%, transparent);
}