/* Vinyvoice-tokens, gelijk aan de fotoversie van de site (vinyvoice-site/site/css/tokens.css). Hex in commentaar. */
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/nunito-sans.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  /* merk */
  --zwart: oklch(14.6% 0.003 68.6);          /* #0B0A09 */
  --papier: oklch(94.8% 0.011 76.6);         /* #F2EDE6 */
  --papier-2: oklch(91.6% 0.015 77.1);
  --papier-3: oklch(87.9% 0.018 78.2);
  --signaal: oklch(68.2% 0.211 37.7);        /* #FF5A1F, alleen vlakken en knoppen */
  --signaal-diep: oklch(59.3% 0.196 36.5);   /* #D9420C */
  --inkt: var(--zwart);
  --inkt-2: oklch(27.6% 0.009 67.4);
  --stil: oklch(46.1% 0.016 71.1);           /* #5E574F, 6.1:1 op papier */
  --stil-op-zwart: oklch(66.7% 0.014 71.3);  /* #9A938B */
  --veldrand: oklch(55.9% 0.016 71.1);       /* 3:1+ op papier */
  --lijn: oklch(83% 0.02 77.3);
  --wit: oklch(99% 0.004 85);
  --focus: var(--zwart);
  --fout: oklch(48% 0.18 27);
  --op-signaal: var(--zwart);
  --op-zwart: var(--papier);
  /* het insteekvel */
  --insteek-papier: oklch(90.8% 0.024 80);   /* #EBE0CE */
  --insteek-inkt: var(--zwart);
  --print-wit: oklch(98.6% 0.004 85);
  --schaduw-vel: 0 1px 2px oklch(20% 0.01 68 / 0.12);
  /* de plaat in de hoesmockup */
  --plaat: oklch(13% 0.004 68);
  --plaat-groef: oklch(19% 0.005 68);

  /* type */
  --font-display: "Clash Display", "Switzer", "Avenir Next", Avenir, "Nunito Sans", system-ui, sans-serif;
  --font-body: "Switzer", "Avenir Next", Avenir, "Nunito Sans", system-ui, sans-serif;
  --font-insteek: "Nunito Sans", system-ui, sans-serif; /* gelijk aan VINYVOICE_LETTERTYPE van de verwerking */
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem;
  --text-titel: clamp(2rem, 4vw + 1rem, 3.25rem);
  --text-sectie: clamp(1.6rem, 1.5vw + 1rem, 2.25rem);
  --text-cijfer: clamp(2rem, 2vw + 1.25rem, 2.75rem);
  --text-lead: clamp(1.0625rem, 0.35vw + 1rem, 1.25rem);
  --tracking-display: -0.015em;

  /* ruimte en vorm */
  --ruimte-1: 4px; --ruimte-2: 8px; --ruimte-3: 12px; --ruimte-4: 16px; --ruimte-5: 24px; --ruimte-6: 40px; --ruimte-7: 64px;
  --r-rond: 999px;
  --duur-kort: 160ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 72rem;
  --z-balk: 300;
  /* chevron voor uitklappers (masker, kleur via currentColor) */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}