/* ============================================================
   SDG-HUISSTIJL — CENTRAAL THEMA
   Concept: Studio Bomvol / Daphne.

   Dit bestand is het ÉNE centrale punt voor de huisstijl van de CRM.
   Nu staat alleen de TYPOGRAFIE vast; de exacte KLEUREN + het LOGO
   volgen zodra we de concept-PDF kunnen inzien. Beide hebben hieronder
   al een duidelijke plek met placeholders — straks in één keer invullen.

   REVERTIBLE: de hele huisstijl hangt aan dit bestand + drie regels in
   base.html (de twee font-<link>s en het tailwind.config-blok). Haal je
   die weg, dan staat de CRM weer exact op de oude stijl. Niets in de
   losse templates is aangepast voor de typografie.
   ============================================================ */

:root {
  /* --- TYPOGRAFIE (huisstijl bevestigd) --------------------------------
     Koppen   = Bebas Neue  (stevig, condensed, hoofdletters)
     Body     = Inter
     Accent   = Necto Mono  → zie noot bij --sdg-font-mono
  */
  --sdg-font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --sdg-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Necto Mono is (nog) niet vrij beschikbaar via Google Fonts/CDN.
     TIJDELIJKE FALLBACK: Space Mono (vrij via Google Fonts). Zodra we een
     Necto-webfont + licentie hebben: zet 'Necto Mono' vooraan in deze
     stack én voeg de @font-face / <link> toe in base.html. De rest van de
     CRM hoeft dan niet aangepast — alles wijst naar deze variabele. */
  --sdg-font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Bebas is condensed all-caps: iets ruimer zetten = beter leesbaar. */
  --sdg-display-tracking: 0.015em;
  --sdg-display-leading: 1.05;

  /* --- KLEUREN — SDG-HUISSTIJL (concept Daphne, definitief) ------------
     Basis = rood + zwart op wit/cream (zoals het logo). Rood is de
     accent-/actiekleur (knoppen, links, highlights), spaarzaam ingezet;
     ink = tekst + donkere balken; wit + cream = achtergronden.

     De rood-ramp staat als KANAAL-RGB (spaties, geen komma's) zodat
     Tailwind-opacity-modifiers blijven werken (bv. bg-orange-50/40 →
     rgb(... / .4)). De tailwind.config (zie _partials/head_brand.html)
     mapt de oude 'orange'-utilities + slate-900 naar deze variabelen —
     daardoor kleurt de héle CRM mee zónder de losse templates aan te raken. */

  /* SDG-rood (accent) — 600 = #C9242B is de merkkleur. */
  --sdg-red-50:  251 237 237;
  --sdg-red-100: 246 218 219;
  --sdg-red-200: 236 183 185;
  --sdg-red-300: 223 144 147;
  --sdg-red-400: 213 90 96;
  --sdg-red-500: 206 42 48;
  --sdg-red-600: 201 36 43;    /* #C9242B — primair accent/actie */
  --sdg-red-700: 168 29 35;    /* hover / diep accent           */
  --sdg-red-800: 135 23 28;
  --sdg-red-900: 90 14 18;

  --sdg-ink:   34 31 31;       /* #221F1F — tekst + donkere vlakken (= slate-900) */
  --sdg-cream: 235 224 206;    /* #EBE0CE — zachte surface/secties + pagina-bg    */
  --sdg-wine:  56 2 21;        /* #380215 — donkerrood/wijn, diep accent          */

  /* Ondersteunend palet — voor badges/statussen/accenten/grafieken,
     NIET als hoofdkleur. Beschikbaar als bg-sdg-navy, text-sdg-teal, … */
  --sdg-support-oranje: #E94D39;
  --sdg-support-navy:   #112348;
  --sdg-support-teal:   #90B6B2;
  --sdg-support-lime:   #D2E17F;
  --sdg-support-zand:   #E1D5C1;

  /* Semantische aliassen (voor direct CSS-gebruik buiten Tailwind). */
  --sdg-color-accent:  rgb(var(--sdg-red-600));
  --sdg-color-ink:     rgb(var(--sdg-ink));
  --sdg-color-bg:      #FFFFFF;
  --sdg-color-cream:   rgb(var(--sdg-cream));
  --sdg-color-border:  #e2e8f0;

  /* --- LOGO — toegepast -------------------------------------------------
     Header + login gebruiken crm/static/img/sdg-logo.png (volledige
     lockup); favicon + kleine plekken: sdg-logo-circle.png. De PNG's
     hebben een witte achtergrond → daarom op een witte header/loginkaart. */
  --sdg-logo: url('/static/img/sdg-logo.png');
}

/* ============================================================
   TYPOGRAFIE-TOEPASSING
   Alleen lettertype/letterspacing/regelhoogte — geen kleuren, geen
   layout. Tailwind-utilities (text-2xl, text-slate-900, …) blijven leidend
   voor grootte/kleur; wij zetten enkel de font-family eroverheen.
   ============================================================ */

/* Body: Inter. (Tailwind-preflight zet 'm ook al via font-sans-config,
   dit is de zekerheid + losse <body>-override.) */
body {
  font-family: var(--sdg-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Koppen/sectiekoppen: Bebas Neue. NIET voor lopende tekst.
   Bebas heeft maar één gewicht (400); forceer dat zodat font-bold/
   font-semibold uit de templates geen lelijke faux-bold maken. */
h1, h2, h3, h4, .font-display {
  font-family: var(--sdg-font-display);
  font-weight: 400;
  letter-spacing: var(--sdg-display-tracking);
  line-height: var(--sdg-display-leading);
}

/* Accenten/labels/code: mono. De CRM gebruikt de Tailwind-utility
   `font-mono` al voor projectnummers, factuurnummers, werkcodes e.d.;
   die wijzen via de tailwind.config naar --sdg-font-mono. <code>/<pre>
   pakken we hier expliciet mee. */
code, kbd, samp, pre {
  font-family: var(--sdg-font-mono);
}