/* Fit Secure portal — thematokens.
   Componenten verwijzen uitsluitend naar deze variabelen, nooit naar losse hex-waarden.
   Dark mode via class="dark" op <html>. */

:root {
  --fs-bg:                  #F2F5F9;
  --fs-surface:             #FFFFFF;
  --fs-surface-2:           #F7F9FC;
  --fs-border:              #E2E8F0;
  --fs-text:                #0F1B33;
  --fs-text-muted:          #5B6B85;

  --fs-primary:             #0088E2;  /* merkblauw: iconen, randen, vlakken zonder tekst */
  --fs-primary-strong:      #0069B0;  /* vlakken met tekst erop (contrast 4.5:1 op wit) */
  --fs-primary-strong-hover:#005791;
  --fs-primary-soft:        #E6F4FD;
  --fs-navy:                #022688;  /* koppen */

  --fs-green:               #B4D400;  /* logo-lime: alleen vlakken en randen */
  --fs-green-ink:           #5F7800;  /* lime als tekst of icoon */
  --fs-green-soft:          #F2F8DA;

  --fs-accent:              #FBBD34;
  --fs-accent-soft:         #FEF3DC;
  --fs-accent-ink:          #6B4A00;

  --fs-on-primary:          #FFFFFF;
  --fs-toggle-off:          #CBD5E3;

  --fs-shadow:    0 1px 2px rgb(2 38 136 / .06), 0 4px 12px rgb(2 38 136 / .06);
  --fs-shadow-sm: 0 1px 2px rgb(2 38 136 / .10);
  --fs-logo-light-display: block;   /* logo-fitsecure.png */
  --fs-logo-dark-display:  none;    /* logo-fitsecure-dark-mode.png */
  --fs-radius: 8px;
}

.dark {
  --fs-bg:                  #0A1024;
  --fs-surface:             #121A33;
  --fs-surface-2:           #18213D;
  --fs-border:              #26314F;
  --fs-text:                #EDF1F8;
  --fs-text-muted:          #9AA8C2;

  --fs-primary:             #4DB2F2;
  --fs-primary-strong:      #3AA9F0;
  --fs-primary-strong-hover:#5CBAF5;
  --fs-primary-soft:        #13294A;
  --fs-navy:                #C7D3FF;

  --fs-green:               #C6E43F;
  --fs-green-ink:           #C6E43F;
  --fs-green-soft:          #25320A;

  --fs-accent:              #FBBD34;
  --fs-accent-soft:         #33280C;
  --fs-accent-ink:          #FBBD34;

  --fs-on-primary:          #071026;
  --fs-toggle-off:          #3A4666;

  --fs-shadow:    0 1px 2px rgb(0 0 0 / .5), 0 4px 12px rgb(0 0 0 / .35);
  --fs-shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --fs-logo-light-display: none;
  --fs-logo-dark-display:  block;
}