/* ============================================================
   PROMPT TELECOM — design tokens v3
   Bron: prompt-visual-identity-guide.pdf (Fleur, 31 juli 2026)
   Kleursysteem (p11), typografie (p12), vormsysteem (p13).
   Archetype-hiërarchie: Ruler (petrol/Sage dominant), Sage-blauw
   voor kennislaag, Ping/lime (Hero) alleen voor CTA's en
   commerciële activatie, Aura (paars) spaarzaam, Hotline als
   gericht warmte-accent.
   ============================================================ */
:root {
  color-scheme: light;

  /* -- Primaire kleuren (guide p11) -- */
  --sage: #4C8396;             /* primaire merkkleur */
  --pitch: #011E26;            /* donkerste vlakkleur, ook bodytekst */
  --baseline: #3F5259;         /* secundaire tekst, nadruk */
  --static: #BAB9B9;           /* neutraal grijs */
  --canvas: #F7F7F7;           /* standaard achtergrond */

  /* -- Secundair -- */
  --ping: #B6F899;             /* lime: CTA's, campagnes (Hero-archetype) */
  --ping-ink: #5A9E3C;         /* verdiepte lime voor tekst/iconen op wit
                                  (contrastpunt, voorgelegd aan Fleur) */
  --ping-soft: #EAFBDF;

  /* -- Tertiair -- */
  --aura: #A98BD5;             /* paars, spaarzaam (Magician) */
  --aura-soft: #E7DFEA;
  --hotline: #EA4F30;          /* oranjerood accent (Caregiver) */
  --hotline-soft: #FCDDD8;
  --mist: #CCDADF;             /* koele lichte tint */

  /* -- Officiële gradiënten (guide p11) -- */
  --grad-sage: linear-gradient(160deg, #4C8396 0%, #CCDADF 100%);
  --grad-pitch: linear-gradient(160deg, #011E26 0%, #3F5259 100%);
  --grad-static: linear-gradient(180deg, #FFFFFF 0%, #BAB9B9 100%);

  /* -- Afgeleide neutralen -- */
  --ink: var(--pitch);
  --muted: var(--baseline);
  --muted-2: #8C9AA0;          /* contrastveilige afgeleide van Static */
  --bg: var(--canvas);
  --card: #FFFFFF;
  --line: #E3E8E9;
  --line-2: #EDF0F1;

  /* -- Constructiegrid (vormsysteem p13) -- */
  --grid-line: rgba(76, 131, 150, .07);
  --grid-size: 56px;

  /* -- Typografie (guide p12): Outfit koppen, Saira body -- */
  --font-head: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Saira', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* -- Vorm: radius volgt de logo-vormtaal (rond = human-first) -- */
  --radius-lg: 28px;
  --radius: 16px;
  --radius-sm: 11px;
  --maxw: 1180px;
  --shadow: 0 1px 2px rgba(1, 30, 38, .05), 0 12px 32px -16px rgba(1, 30, 38, .18);
  --shadow-lg: 0 2px 4px rgba(1, 30, 38, .06), 0 24px 56px -20px rgba(1, 30, 38, .28);
}