/* =====================================================================
   LeisureIQ — merktokens
   Eén bestand voor alle producten: GateIQ, MetronIQ, CampIQ, AccessIQ,
   de cloud-admin en de desktopschil. Niet per product forken.

   Kleuren komen uit de logo's zelf. Pas je hier iets aan, dan verandert
   het in elk product tegelijk.
   ===================================================================== */

:root {
  /* --- Merkkleuren (uit het logo) --------------------------------- */
  --liq-ink:            #091F2F;  /* woordmerk, donkerste navy       */
  --liq-groen:          #05D996;  /* gradient-start (top van de I)   */
  --liq-blauw:          #0678FC;  /* gradient-eind (staart van de Q) */
  --liq-cyaan:          #00A0D8;  /* middenpunt van de gradient      */

  --liq-gradient:       linear-gradient(160deg, var(--liq-groen) 0%,
                                                var(--liq-cyaan) 50%,
                                                var(--liq-blauw) 100%);

  /* --- Vlakken (donker thema, standaard) -------------------------- */
  --liq-bg:             #071624;  /* paginaachtergrond               */
  --liq-vlak:           #0E2537;  /* kaarten, panelen                */
  --liq-vlak-hoog:      #143047;  /* hover, actieve rij              */
  --liq-rand:           #1E3D55;

  /* --- Tekst ------------------------------------------------------ */
  --liq-tekst:          #E6EDF3;
  --liq-tekst-zacht:    #8CA3B8;
  --liq-tekst-uit:      #5A7086;

  /* --- Status ----------------------------------------------------- */
  --liq-ok:             #05D996;  /* licentie geldig, poort open     */
  --liq-let-op:         #F5B841;  /* cache verloopt, heartbeat mist  */
  --liq-fout:           #F0524D;  /* geweigerd, geen licentie        */
  --liq-info:           var(--liq-blauw);

  /* Zachte statusvlakken: achtergrond onder een melding of actief veld. */
  --liq-blauw-zacht:    #113A50;
  --liq-ok-zacht:       #0C3A30;
  --liq-let-op-zacht:   #3B2F12;
  --liq-fout-zacht:     #3A1B1A;

  /* --- Productaccenten -------------------------------------------- */
  /* Alle producten delen de gradient; dit accent onderscheidt ze in
     de cloud-admin waar meerdere producten naast elkaar staan.      */
  --liq-gateiq:         #0678FC;
  --liq-metroniq:       #05D996;
  --liq-campiq:         #00C9A7;  /* tussen groen en cyaan           */
  --liq-accessiq:       #00A0D8;

  /* --- Typografie -------------------------------------------------- */
  --liq-font:           "Segoe UI", system-ui, -apple-system, sans-serif;
  --liq-font-mono:      "IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* Buitenschermen: Atkinson Hyperlegible is ontworpen voor leesbaarheid
     op afstand en bij fel licht. Alleen voor kiosk- en displayschermen,
     niet voor beheerpagina's — die houden --liq-font.                */
  --liq-font-kiosk:     "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  /* --- Vorm -------------------------------------------------------- */
  --liq-radius:         10px;
  --liq-radius-groot:   16px;
  --liq-schaduw:        0 4px 20px rgba(0, 0, 0, .35);
}

/* Licht thema — voor rapportage, print, publieke sites en het
   kioskscherm bij daglicht. Zet class="liq-licht" op <html>.        */
.liq-licht {
  --liq-bg:             #F6F9FC;
  --liq-vlak:           #FFFFFF;
  --liq-vlak-hoog:      #EDF3F8;
  --liq-rand:           #D5E0EA;
  --liq-tekst:          var(--liq-ink);
  --liq-tekst-zacht:    #4A6070;
  --liq-tekst-uit:      #8098AC;
  --liq-blauw-zacht:    #E2EFFD;
  --liq-ok-zacht:       #DDF8EF;
  --liq-let-op-zacht:   #FDF3DC;
  --liq-fout-zacht:     #FDECEA;
}

/* --- Woordmerk in HTML -------------------------------------------
   Gebruik dit waar het logo als tekst moet verschijnen (setup-scherm,
   loginpagina, e-mailsjablonen) zodat het overal identiek oogt.
   <span class="liq-merk">Camp<span class="liq-iq">IQ</span></span>
   ------------------------------------------------------------------ */
.liq-merk {
  font-family: var(--liq-font);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--liq-tekst);
}
.liq-iq {
  background: var(--liq-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}