/*
  Kwartier: designtokens
  Eén bron voor website, folder, campagne en (straks) de app.
  Kleurnamen volgen de dag in een praktijk: van papier en bos tot de vonk.
*/

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  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: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('fonts/instrument-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}

:root {
  /* Fundament */
  --k-bos: #0f2a24;          /* tekst, donkere vlakken, primaire knop */
  --k-bos-2: #173a32;        /* kaarten op bos */
  --k-bos-3: #24493f;        /* lijnen op bos */
  --k-woud: #13392f;         /* grote donkere vlakken: herkenbaar groen, geen zwart */
  --k-woud-2: #1b4739;       /* kaarten op woud */
  --k-nacht: #0b201b;        /* achtergrond in donkere modus */
  --k-mos: #2f6b5a;          /* secundair groen, iconen */
  --k-salie: #dce8e1;        /* zacht groen vlak */
  --k-salie-2: #c3d8cc;
  --k-papier: #f3f5f1;       /* koel salie-wit: tweede vlak, app-achtergrond */
  --k-kalk: #e6eae4;         /* scheidingen, rustige vlakken */
  --k-wit: #ffffff;          /* kaarten */
  --k-grafiet: #55635e;      /* secundaire tekst, 6,3:1 op wit */
  --k-lijn: rgba(15, 42, 36, 0.12);

  /* De vonk: het kwartier. Spaarzaam, nooit als vlak achter kleine tekst. */
  --k-vonk: #ff4d2e;
  --k-vonk-zacht: #ff7a45;
  --k-vonk-diep: #c9361b;    /* vonk als kleine tekst, 4,8:1 op papier */
  --k-klei: #ffe1d8;         /* vonk als tint */

  /* Ondersteunend: agendacategorieën en doelgroepvarianten */
  --k-boter: #f6e7b8;
  --k-zon: #ffb020;
  --k-lavendel: #e2def6;
  --k-iris: #6e5ce6;
  --k-mist: #dce4ea;

  /* Typografie */
  --k-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;

  --k-t-reus: clamp(3.4rem, 1.2rem + 8.4vw, 9rem);
  --k-t-1: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
  --k-t-2: clamp(2.1rem, 1.2rem + 3vw, 3.9rem);
  --k-t-3: clamp(1.45rem, 1.1rem + 1vw, 2rem);
  --k-t-groot: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --k-t-basis: 1.0625rem;
  --k-t-klein: 0.875rem;
  --k-t-mini: 0.75rem;

  --k-spatie-kop: -0.04em;
  --k-spatie-reus: -0.05em;

  /* Ruimte: 4-puntsraster */
  --k-1: 4px;
  --k-2: 8px;
  --k-3: 12px;
  --k-4: 16px;
  --k-5: 24px;
  --k-6: 32px;
  --k-7: 48px;
  --k-8: 64px;
  --k-9: 96px;
  --k-10: 144px;

  /* Vorm */
  --k-r-1: 8px;
  --k-r-2: 14px;
  --k-r-3: 22px;
  --k-r-4: 32px;
  --k-r-5: 44px;
  --k-r-pil: 999px;

  --k-schaduw-1: 0 1px 2px rgba(15, 42, 36, 0.06), 0 2px 8px rgba(15, 42, 36, 0.05);
  --k-schaduw-2: 0 2px 6px rgba(15, 42, 36, 0.06), 0 18px 40px -12px rgba(15, 42, 36, 0.18);
  --k-schaduw-3: 0 4px 12px rgba(15, 42, 36, 0.08), 0 40px 80px -24px rgba(15, 42, 36, 0.32);

  /* Beweging */
  --k-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --k-ease-veer: cubic-bezier(0.34, 1.4, 0.64, 1);
  --k-duur: 480ms;
}