/* ==========================================================================
   QualiMundi — gedeelde ontwerptokens
   Fase 0.1-0.3 van storage/plannen/ux-ui-masterplan-ontwerp.md.

   Bron van waarheid voor admin.css en de zes stylesheets die vandaag geen
   eigen tokens hebben (components.css, aanvraag.css, portaal-chat.css,
   dossier-chat.css, admin-editor.css, klikkaart.css). Ze laden dit bestand
   samen met admin.css, dat zijn eigen --a-*-namen voortaan naar hier
   doorverwijst — geen enkele bestaande regel in admin.css hoefde daarvoor
   te veranderen.

   qualimundi.css raakt dit bestand NIET aan (fase 0, open punt 5): de
   publieke stylesheet houdt haar eigen :root met dezelfde acht gedeelde
   waarden. includes/installatie/tokencontrole.php bewaakt dat de twee
   lijsten niet uit elkaar lopen.

   Kleurwaarden zijn overgenomen, niet verzonnen: acht komen letterlijk uit
   qualimundi.css en admin.css (zie deel A, bevinding 1 van het plan), de
   rest waren tot nu toe hardgecodeerd verspreid over admin.css en de zes
   ongetokeniseerde stylesheets (zie bevinding 2 en 13).
   ========================================================================== */

:root {
  /* --- Acht gedeelde kleuren — identiek aan qualimundi.css --------------- */
  --qm-ink:        #1A1814;
  --qm-ink-2:      #4E483F;
  --qm-ink-3:      #736B60;
  --qm-paper:      #FCFAF6;
  --qm-deep:       #152231;
  --qm-deep-2:     #1E2E40;
  --qm-accent:     #9E5F28;
  --qm-blauw:      #3D6E9E;

  /* --- Werkvlakken (tot nu toe alleen in admin.css) ----------------------- */
  --qm-vlak:       #FFFFFF;
  --qm-rand:       #E2DDD3;
  --qm-rand-zacht: #EFEBE3;

  /*
   * De rand van iets waar je in kunt typen.
   *
   * --qm-rand hierboven geeft op wit een contrast van 1,35:1. Voor een
   * tabelregel of de omlijning van een kaart is dat prima: die versieren, ze
   * dragen geen informatie. Voor de omtrek van een invoerveld is het te
   * weinig — die rand is het enige dat zegt waar het veld begint, en WCAG
   * 1.4.11 vraagt daarvoor 3:1.
   *
   * #949086 haalt 3,19:1 en is de lichtste kleur uit de reeks die erover
   * gaat; #B9B1A4 en #9A968C blijven er met 2,12 en 2,95 net onder. Warm
   * grijs en geen neutraal grijs, zodat het bij het beige van de rest past.
   */
  --qm-rand-veld:  #949086;

  /* --- Betekeniskleuren, met hun lichte vlakken, donkere tekstvarianten en
     randen. De donkere tekstvarianten en de randen stonden tot fase 0
     hardgecodeerd op vijftien verschillende plaatsen (admin.css, components.css,
     dossier-chat.css) — zie bevinding 2 en 13 van het plan. */
  --qm-accent-licht:  #FBF1E8;
  --qm-accent-donker: #7A491F;
  --qm-accent-rand:   #E8D2BC;

  --qm-goed:        #2F6B4F;
  --qm-goed-hover:  #275A42;
  --qm-goed-licht:  #EAF3ED;
  --qm-goed-donker: #1F4B37;
  --qm-goed-rand:   #C6DFD1;

  --qm-fout:        #A33A2A;
  --qm-fout-licht:  #FBEDEA;
  --qm-fout-donker: #7E2C20;
  --qm-fout-rand:   #E8C9C2;

  --qm-blauw-licht:  #EAF0F6;
  --qm-blauw-donker: #24506F;

  /* Sterkere waarschuwing dan de gewone accent — de trechtergrafiek op het
     dashboard (was #B4552F, ongedefinieerd elders). */
  --qm-waarschuwing-sterk: #B4552F;

  /* Het maandenoverzicht ("beste reismaand") op een landpagina — publiek
     zichtbaar, dus deze twee waarden staan hier zodat components.css geen
     hardgecodeerde hex meer nodig heeft, met exact dezelfde pixelwaarde als
     voorheen (was #E2EAF2 / #F2EADF, rechtstreeks in de selector). */
  --qm-seizoen-top:  #E2EAF2;
  --qm-seizoen-goed: #F2EADF;

  /* Inactieve/uitgeschakelde status. Was #EFEFEF / #6B6B6B — twee losse
     grijzen die nergens anders voorkwamen. Vervangen door de bestaande
     warme neutralen, zodat er geen negende grijstint bijkomt. */
  --qm-uit-vlak:   var(--qm-rand-zacht);
  --qm-uit-tekst:  var(--qm-ink-3);

  /* --- Letterfamilies ------------------------------------------------------ */
  --qm-serif: "Cormorant Garamond", "Iowan Old Style", Garamond, Georgia, "Times New Roman", serif;
  --qm-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --qm-mono:  ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  /* --- Compacte typeschaal — voor beheer en de drie portalen -------------
     De publieke schaal (--t-hero tot --t-micro in qualimundi.css) is gemaakt
     om gelezen te worden: een kop van 120px hoort niet op een dossierscherm
     dat bediend wordt. Zie bevinding 13 van het plan. Namen lopen bewust
     parallel aan de publieke schaal (d1/d2/d3/lead/body/small/micro) zodat
     het dezelfde ladder is, alleen ingekort. */
  --qm-t-d1:    1.6rem;   /* paginatitel */
  --qm-t-d2:    1.2rem;   /* sectiekop */
  --qm-t-d3:    1.05rem;  /* kaartkop */
  --qm-t-lead:  1rem;
  --qm-t-body:  .9rem;
  --qm-t-small: .82rem;
  --qm-t-micro: .72rem;

  /* --- Ritme (compact) ---------------------------------------------------- */
  --qm-sp-sectie: clamp(2rem, 4vw, 3.5rem);
  --qm-sp-blok:   1.25rem;
  --qm-gutter:    clamp(1.25rem, 3vw, 2.25rem);

  /* --- Randen, radius, beweging -------------------------------------------- */
  --qm-radius:     6px;
  --qm-radius-mid: 8px;
  --qm-ease:       cubic-bezier(.22, .61, .36, 1);

  /* --- Interactietoestanden (fase 0.2) -------------------------------------
     Eén set voor knop, veld, link, tabblad en kaart, zodat een hoverkleur
     niet meer per component apart wordt uitgevonden (zie bevinding 2: drie
     ongedefinieerde tokens vielen terug op groen/Tailwind-blauw, precies
     omdat er geen gedeelde staat-tokens bestonden). */
  --qm-staat-hover-vlak:       rgba(21, 34, 49, .05);
  --qm-staat-actief-vlak:      rgba(21, 34, 49, .09);
  --qm-staat-geselecteerd-vlak: var(--qm-accent-licht);
  --qm-staat-geselecteerd-rand: var(--qm-accent);
  --qm-staat-uitgeschakeld-opacity: .45;
  --qm-staat-fokus-kleur: var(--qm-blauw);
  --qm-staat-fokus-ring:  0 0 0 3px rgba(61, 110, 158, .35);
  --qm-staat-bezig-duur:  .9s;
}

/* Focus blijft altijd zichtbaar — nooit outline:none zonder een even
   duidelijke vervanging. Geldt globaal voor elk toetsenbordgebruik in
   beheer en de portalen. */
:focus-visible {
  outline: 2px solid var(--qm-staat-fokus-kleur);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Een laadtoestand mag draaien voor wie dat wil zien, maar blijft
   herkenbaar door kleur en tekst voor wie beweging heeft uitgezet — niet
   alleen stilzetten, want dan verdwijnt het enige signaal dat er iets
   loopt. Componenten die "bezig" tonen volgen deze regel via
   .qm-bezig, gedefinieerd in fase 0.5 samen met de rest van de
   componentenbibliotheek. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}