/* ===================================================================
   Pro-Monty — Design tokens (v3, paraplumerk)
   Canoniek: 01_huisstijl/kleuren-fonts/tokens.json
   Fonts: Instrument Serif × Geist × JetBrains Mono (Google Fonts)
   =================================================================== */

:root {
  /* --- Primair paar --- */
  --pm-anthracite: #1A2230;   /* structuur: header, tekst, zegels */
  --pm-orange:     #EA6B2A;   /* actie: CTA, accent, highlights   */

  /* --- Antraciet-schaal --- */
  --pm-ink:        #11161C;   /* diepste contrast        */
  --pm-graphite:   #2A3544;   /* body tekst secundair    */
  --pm-muted:      #656D7B;   /* subtekst, meta (AA op bone) */
  --pm-muted-soft: #8B94A1;   /* disabled, hints         */

  /* --- Oranje-schaal --- */
  --pm-orange-deep: #C9541B;  /* hover / active          */
  --pm-orange-soft: #FBE5D4;  /* tint / badge-achtergrond */
  --pm-orange-cta:      #C0521B;  /* knop met witte tekst — AA-contrast */
  --pm-orange-cta-deep: #A5470F;  /* CTA hover                          */
  --pm-orange-hero:     #E56627;  /* hero-tekstaccent op bone — >=3:1 (3,08:1) */

  /* --- Neutralen --- */
  --pm-surface:   #FFFFFF;    /* kaart-/paneel-oppervlak */
  --pm-bone:      #F7F5F2;    /* pagina-achtergrond      */
  --pm-fog:       #EDEAE5;    /* alt kaart-achtergrond   */
  --pm-line:      #E2DED6;    /* borders                 */
  --pm-line-dark: #D4CFC5;    /* sterkere borders        */

  /* --- Functionele labels (alleen als klein label, nooit structureel) --- */
  --pm-ok:      #2F6F4E;  --pm-ok-bg:     #E4EFE7;   /* goed / actief / live      */
  --pm-attn:    #C68A2C;  --pm-attn-bg:   #F3EFE8;   /* let op / in bewerking     */
  --pm-info:    #1A2230;  --pm-info-bg:   #E7E9EE;   /* neutraal / informatief    */
  --pm-danger:  #B04A3E;  --pm-danger-bg: #F1E4E2;   /* fout / niet doen (don't)  */

  /* --- Typografie --- */
  --pm-font-display: 'Instrument Serif', Georgia, serif;
  --pm-font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --pm-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --pm-size-display: clamp(56px, 7vw, 96px);
  --pm-size-h1:      clamp(40px, 5vw, 64px);
  --pm-size-h2:      clamp(28px, 3vw, 44px);
  --pm-size-h3:      22px;
  --pm-size-body-lg: 16px;
  --pm-size-body:    15px;
  --pm-size-small:   13px;
  --pm-size-label:   11px;

  --pm-lh-tight:  0.95;
  --pm-lh-snug:   1.2;
  --pm-lh-normal: 1.55;

  --pm-ls-tight:  -0.02em;
  --pm-ls-normal: 0;
  --pm-ls-label:  0.14em;
  --pm-ls-caps:   0.20em;

  /* --- Spacing (basis 4) --- */
  --pm-space-1: 4px;   --pm-space-2: 8px;   --pm-space-3: 12px;  --pm-space-4: 16px;
  --pm-space-5: 20px;  --pm-space-6: 24px;  --pm-space-7: 28px;  --pm-space-8: 32px;
  --pm-space-10: 40px; --pm-space-14: 56px; --pm-space-16: 64px; --pm-space-24: 96px;

  /* --- Radius --- */
  --pm-radius-sm:   2px;    /* panelen, inputs  */
  --pm-radius-md:   6px;
  --pm-radius-lg:   2px;    /* kaarten/panelen — huisstijl: 2px, alleen knoppen/badges pill */
  --pm-radius-pill: 100px;  /* knoppen, badges  */

  /* --- Schaduw --- */
  --pm-shadow-sm: 0 1px 2px rgba(17,22,28,0.06), 0 1px 0 rgba(17,22,28,0.04);
  --pm-shadow-md: 0 2px 6px rgba(17,22,28,0.06), 0 10px 30px -12px rgba(17,22,28,0.18);

  /* --- Motion --- */
  --pm-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --pm-duration-fast: 180ms;
  --pm-duration-base: 220ms;
}