/* ============================================================
   LUCY'S WEB CONTROL CENTER - TOKENS
   Overgenomen uit de huisstijl van lucysweb (css/core.css):
   dezelfde kleuren, dezelfde mono, dezelfde verspringende
   omlijning, dezelfde scherpe hoeken.
   ============================================================ */

:root {
  /* ---------- Merkkleuren (niet aanraken) ---------- */
  --roze:       #ff4f8b;
  --roze-diep:  #e0356f;
  --roze-zacht: #fdeff4;
  --geel:       #ffd23f;
  --geel-diep:  #b9860b;
  --geel-zacht: #fff8e0;
  --ink:        #16161a;
  --ink-2:      #26262d;
  --ink-3:      #33333d;
  --paper:      #ffffff;
  --backdrop:   #ececef;
  --muted:      #8b8b95;
  --label:      #6c6c76;
  --lijn:       #e7e7ec;

  /* ---------- Werkvlakken van het dashboard ---------- */
  --vlak:       var(--paper);      /* kaarten */
  --vlak-2:     #f6f6f8;           /* ingezonken vlakken, tabelkoppen */
  --vlak-3:     #eeeef1;           /* hover */
  --pg-bg:      var(--backdrop);   /* pagina-achtergrond */

  /* ---------- Signaalkleuren ---------- */
  /* Roze en geel blijven accent; groen/rood alleen voor status. */
  --ok:        #1d9a63;
  --ok-zacht:  #e3f6ed;
  --let-op:    var(--geel-diep);
  --let-op-zacht: var(--geel-zacht);
  --alarm:     #d92d20;
  --alarm-zacht: #fdeceb;
  --info:      #2f6fed;
  --info-zacht: #e9f0fe;

  /* ---------- Typografie ---------- */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono",
          "Roboto Mono", Menlo, Consolas, monospace;
  --display: "Geist", var(--mono);

  --t-xl:    clamp(1.7rem, 3.2vw, 2.4rem);  /* paginatitel */
  --t-l:     clamp(1.25rem, 2vw, 1.6rem);   /* sectiekop */
  --t-m:     1.06rem;                        /* kaartkop */
  --t-cijfer: clamp(1.9rem, 3.4vw, 2.6rem); /* statistiekgetal */
  --t-lead:  .95rem;
  --t-body:  .88rem;
  --t-klein: .8rem;
  --t-label: .68rem;

  /* ---------- Vormtaal ---------- */
  --ronding:  8px;   /* net iets afgerond, overal hetzelfde */
  --ronding-blok: 14px;  /* zachtere hoek voor de blokken op het dashboard */
  --vspr:     9px;   /* hoe ver de lijn verspringt */
  --vspr-s:   6px;   /* kleinere variant voor compacte elementen */
  --lijn-dik: 2px;

  /* ---------- Schaduw ---------- */
  --sk: rgba(22, 22, 26, .16);
  --schaduw-1: 0 2px 8px var(--sk);
  --schaduw-2: 0 10px 24px var(--sk);
  --schaduw-3: 0 22px 50px rgba(22, 22, 26, .28);

  /* ---------- Ritme ---------- */
  --nav-h:   64px;
  --zij-b:   244px;   /* breedte zijbalk */
  --pad-x:   clamp(16px, 3vw, 36px);
  --max:     1600px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---------- Beweging ---------- */
  --ease:  cubic-bezier(.22, 1, .36, 1);
  --snel:  .18s var(--ease);
  --traag: .55s var(--ease);

  /* ---------- Stapeling ---------- */
  --z-zijbalk:  40;
  --z-kopbalk:  30;
  --z-waas:     90;
  --z-modaal:  100;
  --z-melding: 120;
}