/* ============================================================
   Health Cockpit — brand.css
   Eén gedeelde stijlbron voor de hele reis: publiek én app.
   Concept: "Salie is het merk, petrol is de interface."

   - Salie (#7A9E7E) is de merkkleur: accenten, actieve staat, iconen.
   - Voor witte tekst op een salie-knop gebruik je --brand-button
     (#4F7355, WCAG AA 5.36:1) — NIET --brand (2.99:1, faalt).
   - Petrol (#32535F) is de interface/chrome: koppen, nav, sidebar.
   - Publieke pagina's: warme crème achtergrond. App: koel grijs.
   - Fonts self-hosted (geen Google-call, GDPR + snelheid):
     Fraunces (publieke koppen), DM Sans (body + alle UI).
   ============================================================ */

/* ---- Self-hosted fonts (woff2 in /static/fonts/) ---- */

/* DM Sans — variable font, weights 400–700. Body + alle UI. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — variable font, weights 400–600. Publieke koppen. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Brand tokens ---- */
:root {
  /* Merkkleur salie */
  --brand: #7A9E7E;          /* accenten, borders, actieve staat, iconen — NIET witte tekst erop */
  --brand-button: #4F7355;   /* achtergrond knoppen/links met WITTE tekst (WCAG AA 5.36:1) */
  --brand-deep: #5F8263;     /* hover op groen vlak */
  --brand-tint: #E8EFE7;     /* chip/label/voortgang-achtergrond met DONKERE tekst */

  /* Interface / chrome petrol */
  --ink: #32535F;            /* koppen, nav, sidebar, topbar */

  /* Oppervlakken */
  --surface-warm: #FAF7F2;   /* publieke pagina's */
  --surface-cool: #EEF1F3;   /* de app */

  /* Fonts */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tekst-hiërarchie (exact uit de goedgekeurde mockup "Uniforme huisstijl").
     De mockup gebruikt warme grijsgroene tinten voor body/muted, niet het koele
     houtskool uit de oude landing.css. Koppen = --ink (petrol). */
  --brand-text: #51595B;         /* body-tekst op lichte grond (mockup) */
  --brand-text-muted: #6E7671;   /* secundaire tekst (mockup) */
  --brand-text-soft: #8A8F8B;    /* tertiaire/label-tekst (mockup) */
  --brand-tint-text: #4E6E52;    /* donkergroene tekst op --brand-tint chips (mockup) */
  --brand-border: #E6E0D5;       /* zachte rand op crème */

  /* Aanvullende oppervlak- en accenttokens uit de mockup (single source of truth
     i.p.v. losse hardcodes). */
  --surface-tint: #F2ECE3;       /* warme secundaire sectie-achtergrond (features, prijzen) */
  --brand-warn: #C4704B;         /* terracotta waarschuwing/onbetaald-accent */
}