/* Vormgeving van De Kennismaatschap als CSS-variabelen, voor de site, het beheer en de inlogpagina.
   De twee merkkleuren komen uit de huisstijl (docs/huisstijl.md): blauw #0E6CA7 en groen #91BD55.
   De rest is daarvan afgeleid. Lettertypen staan op de eigen server (npm run fonts). */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  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 {
  /* Merk */
  --km-blauw: #0E6CA7;
  --km-groen: #91BD55;

  /* Afgeleid van het merk */
  --km-blauw-diep: #0A5486;
  --km-blauw-nacht: #082C45;
  --km-inkt: #0E1D29;
  --km-blauw-licht: #D9E9F4;
  --km-blauw-mist: #ECF4FA;
  --km-groen-diep: #3E6A17;
  --km-groen-licht: #E5EFD5;
  --km-groen-zacht: #C6DEA2;
  --km-papier: #FAF9F5;
  --km-papier-2: #F2F0E9;
  --km-wit: #FFFFFF;
  --km-grafiet: #45525D;
  --km-steen: #5E6B75;

  /* Betekenis, licht */
  --bg: var(--km-papier);
  --bg-2: var(--km-papier-2);
  --vlak: var(--km-wit);
  --fg: var(--km-inkt);
  --fg-2: var(--km-grafiet);
  --fg-3: var(--km-steen);
  --lijn: rgba(14, 29, 41, 0.12);
  --lijn-2: rgba(14, 29, 41, 0.2);
  --link: var(--km-blauw);
  --blauw-tekst: var(--km-blauw);
  --groen-tekst: var(--km-groen-diep);
  /* Groen voor grote letters, zoals de haakjes in de kop: haalt 3:1 op papier */
  --groen-kop: #6E9C36;
  --focus: var(--km-blauw);
  --logo-blauw: var(--km-blauw);
  --logo-groen: var(--km-groen);
  --logo-inkt: #1D2B36;
  --kop-bg: rgba(250, 249, 245, 0.9);
  color-scheme: light;

  /* Letters */
  --f-kop: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-tekst: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-klein: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-basis: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-h2: clamp(2rem, 1.45rem + 2.4vw, 3.75rem);
  --t-groot: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --t-held: clamp(2.75rem, 1.35rem + 6.2vw, 7.25rem);

  /* Ruimte en maat */
  --rand: clamp(16px, 4.5vw, 48px);
  --breed: 1280px;
  --smal: 760px;
  --sectie: clamp(64px, 8.5vw, 124px);

  /* Vormen: de hoeken van de blokjes in het logo zijn 6 procent van hun zijde */
  --r-klein: 8px;
  --r: 16px;
  --r-groot: 24px;
  --kanteling: 11.8deg;
  --schaduw-1: 0 1px 2px rgba(14, 29, 41, 0.05), 0 10px 28px -16px rgba(14, 29, 41, 0.22);
  --schaduw-2: 0 2px 6px rgba(14, 29, 41, 0.05), 0 28px 64px -28px rgba(14, 29, 41, 0.34);

  /* Karakter van bewegen */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-veer: cubic-bezier(0.34, 1.45, 0.5, 1);
  --ease-in-uit: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Donker. Licht is de standaard; thema.js zet data-theme op de html als je in de kop iets anders
   kiest: "dark" altijd donker, "auto" volgt het apparaat. Houd de twee blokken hieronder gelijk. */
:root[data-theme="dark"] {
  --bg: #07131D;
  --bg-2: #0B1C2A;
  --vlak: #0F2333;
  --fg: #EAF1F6;
  --fg-2: #B2C1CD;
  --fg-3: #8A9BA8;
  --lijn: rgba(234, 241, 246, 0.12);
  --lijn-2: rgba(234, 241, 246, 0.2);
  --link: #74B9E8;
  --blauw-tekst: #74B9E8;
  --groen-tekst: #ACD675;
  --groen-kop: #9DCB5E;
  --focus: #74B9E8;
  --logo-blauw: #3D97D6;
  --logo-groen: #9DCB5E;
  --logo-inkt: #EAF1F6;
  --km-blauw-mist: #0D2435;
  --km-groen-licht: #142A16;
  --km-blauw-licht: #12324A;
  --kop-bg: rgba(7, 19, 29, 0.86);
  --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -16px rgba(0, 0, 0, 0.7);
  --schaduw-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 28px 64px -28px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #07131D;
    --bg-2: #0B1C2A;
    --vlak: #0F2333;
    --fg: #EAF1F6;
    --fg-2: #B2C1CD;
    --fg-3: #8A9BA8;
    --lijn: rgba(234, 241, 246, 0.12);
    --lijn-2: rgba(234, 241, 246, 0.2);
    --link: #74B9E8;
    --blauw-tekst: #74B9E8;
    --groen-tekst: #ACD675;
    --groen-kop: #9DCB5E;
    --focus: #74B9E8;
    --logo-blauw: #3D97D6;
    --logo-groen: #9DCB5E;
    --logo-inkt: #EAF1F6;
    --km-blauw-mist: #0D2435;
    --km-groen-licht: #142A16;
    --km-blauw-licht: #12324A;
    --kop-bg: rgba(7, 19, 29, 0.86);
    --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -16px rgba(0, 0, 0, 0.7);
    --schaduw-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 28px 64px -28px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}