/* =====================================================================
   portal.css — de huisstijl van Green Change op het thema Bond BS5

   Plakken in: Persona Bar → Settings → Site Settings → Appearance →
   Custom CSS (DNN slaat het op als /Portals/<id>/portal.css).

   Kleuren uit het logo (sRGB, omgerekend uit de CMYK-versie):
     groen  #6F9D42   bovenkant van de ring
     teal   #009D91   onderkant van de ring
     donker #004B45   de woorden GREEN CHANGE
     licht  #55B0AB   "Getting transitions done"
   De logokleuren zelf zijn te licht voor witte tekst op een knop; daarom
   zijn primary en secondary donkerdere tinten (WCAG AA, gemeten):
     wit op primary   #4E7D2B  4,9 : 1
     wit op secondary #00786E  5,3 : 1
     wit op dark      #004B45  10  : 1

   Geschreven voor Bond BS5 1.0.0. Alleen tokens; geen eigen selectors op
   thema-onderdelen, zodat een nieuwe themaversie hier niets breekt.
   ===================================================================== */

:root {

  /* ---------- Merkkleuren ---------- */
  --bond-primary: #4E7D2B;        /* groen: hoofdknop, labels, streepjes, cijferaccent */
  --bond-primary-600: #3E6522;    /* hover op de hoofdknop */
  --bond-primary-soft: #EEF5E7;   /* heel licht groen vlak (o.a. inlogscherm) */

  --bond-secondary: #00786E;      /* teal: tweede knop, uitgelichte kaart */
  --bond-secondary-600: #00625A;

  --bond-dark: #004B45;           /* koppen, footer, cijferbalk */
  --bond-dark-700: #003A35;       /* donkere secties (Resultaten) */
  --bond-dark-600: #0A5C55;       /* hover op donker */
  --bond-dark-100: #BCD6D2;       /* zachte tekst op donker */

  --bond-accent: #8DBF5A;         /* lichtgroen accent op donker (5,7 : 1 op dark-700) */
  --bond-accent-soft: #8FD3CD;    /* lichtteal: labels en kopjes op donker */

  /* Donkere panelen en het verloop over de foto bij Resultaten:
     --bond-dark-700 (#003A35 = 0, 58, 53) met transparantie. */
  --bond-dark-panel: rgba(0, 58, 53, 0.94);
  --bond-overlay-strong: rgba(0, 58, 53, 0.9);
  --bond-overlay-soft: rgba(0, 58, 53, 0.65);

  /* ---------- Achtergronden ---------- */
  --bond-bg: #F4F8F6;             /* paginakleur, sectie "tint": licht groengrijs */
  --bond-muted: #E5F1EE;          /* rustige vlakken: FAQ, citaten, eerste stap */
  --bond-muted-soft: #F0F7F4;
  --bond-muted-strong: #D2E6E1;

  /* ---------- Tekst en randen ---------- */
  --bond-text: #34474A;           /* leestekst: grijs met een zweem teal */
  --bond-on-dark-muted: #D3E6E3;
  --bond-border: rgba(0, 75, 69, 0.14);
  --bond-border-strong: rgba(0, 75, 69, 0.26);
  --bond-focus-ring: rgba(78, 125, 43, 0.3);

  /* ---------- Vorm: zacht en rond, zoals de ring in het logo ---------- */
  --bond-radius-button: 999px;    /* pilvormige knoppen */
  --bond-radius-card: 20px;
  --bond-radius-panel: 20px;
  --bond-radius-media: 32px;
  --bond-results-corner: 36px;    /* ronde onderkant van de donkere band */
  --bond-results-corner-lg: 80px;

  /* ---------- Karakter ---------- */
  --bond-letter-spacing-display: -0.02em;
  --bond-card-min-height: 0;
  --bond-stats-tilt: 0deg;

  /* ---------- Lettertype ---------- */
  /* Fira Sans, zelf gehost in /Portals/0/fonts/ (resx: Fonts.WebfontUrl). */
  --bond-font-body: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --bond-weight-heading: 600;

  /* ---------- Logo ---------- */
  /* Het logo is vrijwel vierkant, met een kleine regel tekst eronder: hoger
     dan de standaard 44px, anders is "Getting transitions done" onleesbaar. */
  --bond-logo-height: 64px;
  --bond-logo-height-sm: 50px;
  --bond-nav-height-lg: 6rem;
  --bond-footer-logo-height: 72px;
  /* De footer maakt het logo wit (standaard filter): dat werkt met de
     transparante PNG. Met de originele JPEG (witte achtergrond) wordt het
     een wit blok; gebruik die dus niet als Site Logo. */

  /* ---------- Beeldmerk ---------- */
  --bond-mark: url("/Portals/0/Images/beeldmerk-greenchange.svg");
  --bond-mark-display: block;
  --bond-mark-size: 3.5rem;

  /* Ringen op splash- en inlogpagina: groen en teal. */
  --bond-ring-a: #6F9D42;
  --bond-ring-b: #009D91;
}