/* Balanshuis — ontwerptokens. Eén bron voor balanshuis.nl (styles.css, /huishouden/) en de
   trainersapp. Gewone CSS custom properties: werkt zonder build in de statische site
   (<link rel="stylesheet" href="/tokens.css"> vóór styles.css) en in Next.js
   (@import in globals.css, met Tailwind v4 `@theme inline { --color-ink: var(--bs-ink); }`).

   Samengevoegd uit www/styles.css (--bs-*) en huishouden-bron/site_huishouden.css (--hh-*),
   alles onder één voorvoegsel --bs-. De oude --hh-namen staan onderaan als alias, zodat de
   site kan overstappen zonder elke regel te herschrijven.

   Letters: relatieve paden, dus ze werken vanaf balanshuis.nl/tokens.css én vanuit het
   prototype (../../www/tokens.css). Licenties: fonts/OFL-Figtree.txt en fonts/OFL-PTSans.txt. */

@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("fonts/PTSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("fonts/PTSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Grond en vlakken ---------- */
  --bs-surface:       #ffffff;
  --bs-surface-soft:  #f4f8fa;                  /* was --hh-vlak */
  --bs-card:          #ffffff;                  /* was --hh-kaart */
  --bs-line:          #dde7ec;                  /* haarlijn tussen secties */
  --bs-edge:          rgba(19, 60, 88, 0.08);   /* rand om kaarten, was --hh-rand */

  /* ---------- Tekst (contrast op wit) ---------- */
  --bs-ink:           #133c58;  /* koppen, 11,6:1 */
  --bs-body:          #3a5f75;  /* lopende tekst, 6,8:1 */
  --bs-muted:         #4d6f84;  /* bijschrift, 5,4:1. Was #5f8299 (4,1:1): te laag onder 24px */
  --bs-link:          #2b78a1;  /* 4,9:1 */
  --bs-link-hover:    #1d5f83;

  /* ---------- Merk: groen naar blauw ---------- */
  --bs-green:         #5e9438;  /* tekst alleen vanaf 24px (3,6:1) */
  --bs-green-ink:     #4a7a2c;  /* groene tekst onder 24px, 5,1:1 op wit */
  --bs-green-deep:    #3f6b24;  /* tekst op --bs-green-tint, 5,5:1 */
  --bs-green-tint:    #eaf3e1;
  --bs-green-bright:  #7fb457;  /* accenten, nooit als tekst */
  --bs-blue-bright:   #2e9bd0;  /* focusring, accenten */
  --bs-brand-green:   #93c35d;  /* begin van de merkovergang (logo, ring) */
  --bs-brand-blue:    #008dc9;  /* eind van de merkovergang */

  /* ---------- De weegschaal ----------
     Roze alleen in de doorgeslagen weegschaal ("zo gaat het vaak"), nergens anders.
     Groen voor in balans ("zo kan het ook"). */
  --bs-scale-off:      #e83182;
  --bs-scale-off-tint: #fdedf4;
  --bs-scale-on:       #5e9438;
  --bs-scale-on-fill:  #7fb457;
  --bs-scale-post:     #1e3a4c;

  /* ---------- Iconen van de handelingen (www/assets/handelingen/) ---------- */
  --bs-icon-line:     #1e3a4c;
  --bs-icon-accent:   #00a0a0;

  /* ---------- Knoppen en donkere band ---------- */
  --bs-button:        #133c58;
  --bs-button-press:  #0d2c42;
  --bs-on-button:     #ffffff;
  --bs-band:          #1d4e6e;
  --bs-on-band:       #d6e6ef;

  /* ---------- Gradiënten ---------- */
  --bs-hero:     linear-gradient(155deg, #e2f0d6 0%, #d6eceb 46%, #c6e2f4 100%);
  --bs-hero-mid: #d6eceb;
  --bs-film:     linear-gradient(140deg, #0d6f9e 0%, #0b8f9a 50%, #4f9f4a 100%);
  --bs-stripe:   linear-gradient(90deg, #6cb33f, #1f9ad6);

  /* ---------- Vorm en diepte ---------- */
  --bs-radius:        16px;
  --bs-radius-card:   20px;   /* was --hh-radius */
  --bs-radius-large:  24px;
  --bs-radius-button: 8px;
  --bs-radius-pill:   999px;
  --bs-shadow-card:   0 1px 2px rgba(19, 60, 88, 0.05), 0 8px 24px -12px rgba(19, 60, 88, 0.16);
  --bs-shadow-lift:   0 22px 44px -18px rgba(19, 60, 88, 0.32), 0 4px 10px rgba(19, 60, 88, 0.06);
  --bs-shadow-film:   0 16px 44px rgba(19, 60, 88, 0.22);
  --bs-ease:          cubic-bezier(0.2, 0.7, 0.2, 1);   /* was --hh-zacht */

  /* ---------- Letters ---------- */
  --bs-font:    "Figtree", system-ui, sans-serif;     /* lopende tekst en bediening */
  --bs-heading: "PT Sans", system-ui, sans-serif;     /* koppen */
  --bs-text-small: 17px;   /* ondergrens lopende tekst */
  --bs-text:       19px;
  --bs-text-lead:  20px;
  --bs-text-large: 21px;   /* bovengrens lopende tekst; tonen bij de cliënt */

  /* ---------- Maten ---------- */
  --bs-touch:   44px;      /* kleinste raakvlak */
  --bs-gutter:  clamp(22px, 5vw, 72px);
  --bs-content: 1280px;
  --bs-measure: 680px;     /* maximale regelbreedte lopende tekst */
  --bs-section: clamp(56px, 8vw, 104px);

  /* ---------- Aliassen voor de huidige /huishouden/-stylesheet ---------- */
  --hh-kaart:      var(--bs-card);
  --hh-vlak:       var(--bs-surface-soft);
  --hh-rand:       var(--bs-edge);
  --hh-schaduw:    var(--bs-shadow-card);
  --hh-schaduw-op: var(--bs-shadow-lift);
  --hh-radius:     var(--bs-radius-card);
  --hh-zacht:      var(--bs-ease);
}