/* =====================================================================
   huisstijl.css — de huisstijl van LeisureIQ voor het beheerportaal
   De tokens van de producten (GateIQ, PlannIQ, MetronIQ): donkere
   vlakken, het lettertype Archivo (uit het pakket, niet van Google,
   zodat er geen adres naar Google gaat), en het woordmerk met het
   verloop groen → cyaan → blauw over de letters IQ.
   Archivo: SIL Open Font License, zie fonts/OFL-Archivo.txt.
   ===================================================================== */

@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* vlakken */
  --bg:#071624; --kaart:#0E2537; --kaart-2:#143047; --kaart-3:#1A3A52;
  --invoer:#0A1D2E;
  /* randen */
  --rand:#1E3D55; --rand-sterk:#2C536F;
  /* tekst */
  --kop:#F5F9FC; --tekst:#E6EDF3; --zacht:#8CA3B8; --uit:#5A7086;
  /* accenten */
  --groen:#05D996; --accent:#00A0D8; --blauw:#0678FC;
  --geel:#F5B841; --oranje:#F59E41; --rood:#F0524D;
  /* lichte varianten voor tekst op een getint vlak */
  --groen-licht:#6FEBC2; --geel-licht:#F5D89B; --rood-licht:#F5A9A6;
  --op-accent:#04121D;
  --verloop:linear-gradient(90deg,#05D996 0%,#00A0D8 55%,#0678FC 100%);
}

/* Het woordmerk: alleen de letters IQ krijgen het verloop. */
.woordmerk{font-family:var(--font);font-weight:800;font-stretch:112%;letter-spacing:-.01em;
  color:var(--kop);white-space:nowrap}
.woordmerk .iq{background:var(--verloop);-webkit-background-clip:text;background-clip:text;
  color:transparent}