/* ============================================================
   PDCS Design System — tokens + motifs.
   Overgenomen uit het PDCS design system (pdcs-design-system).
   Alleen de fontpaden en de gebruikte gewichten zijn aangepast:
   Poppins is gesubset naar latin + latin-ext en geconverteerd naar
   woff2, en alleen de gewichten die deze site echt gebruikt zijn
   meegenomen (400, 400 italic, 500, 600, 700, 800).
   ============================================================ */

/* --- Poppins ------------------------------------------------ */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/poppins-extrabold.woff2") format("woff2");
}

/* --- Kleur -------------------------------------------------- */

:root {
  /* Primair */
  --color-white: #ffffff;
  --color-navy: #162f65;   /* hoofdkleur — Pantone 534 CP */
  --color-orange: #ff9933; /* accent   — Pantone 130 U  */

  /* Secundair */
  --color-steel-blue: #99abba;
  --color-bright-blue: #007bff;
  --color-pale-blue-grey: #dce4ea;
  --color-off-white: #f5f5f7;
  --color-deep-navy: #192335;
  --color-violet: #4e2ebf;

  /* Semantisch */
  --surface-default: var(--color-white);
  --surface-inverted: var(--color-navy);
  --surface-subtle: var(--color-off-white);
  --text-default: var(--color-navy);
  --text-inverted: var(--color-white);
  --text-muted: var(--color-steel-blue);
  --accent-primary: var(--color-orange);
  --accent-secondary: var(--color-bright-blue);

  /* Lijnen */
  --border-subtle: var(--color-pale-blue-grey);
  --border-strong: var(--color-navy);

  /* Interactiestates */
  --state-orange-hover: #f58a1e;
  --state-navy-hover: #1e3e82;
  --state-overlay-navy: rgba(22, 47, 101, 0.72);
}

/* --- Typografie --------------------------------------------- */

:root {
  --font-family-base: "Poppins", "Inter", "Montserrat", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --letter-spacing-caps: 0.08em;
  --letter-spacing-label: 0.12em;
  --letter-spacing-tight: -0.01em;
}

/* --- Vorm en ruimte ----------------------------------------- */

:root {
  /* Het merk is scherp: radius is 0, overal. */
  --radius-none: 0px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* --- Effecten ----------------------------------------------- */

:root {
  /* Enige schaduw in het merk: lichte drop shadow op foto's. */
  --shadow-photo: 0 8px 24px rgba(25, 35, 53, 0.18);
  --shadow-photo-sm: 0 3px 10px rgba(25, 35, 53, 0.14);
}

/* --- Diagonale snede ----------------------------------------
   Het meest herkenbare merkelement: een scherpe diagonaal die
   een hoek in twee kleurvlakken snijdt. Altijd in een hoek,
   nooit gecentreerd, nooit op meer dan twee hoeken tegelijk.

   Gebruik:
     <div class="pdcs-diagonal-cut" data-corner="br" data-on="navy"></div>
   in een container met position: relative.
------------------------------------------------------------- */

.pdcs-diagonal-cut {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.pdcs-diagonal-cut::before,
.pdcs-diagonal-cut::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 78%;
}
/* rechtsonder (standaard) */
.pdcs-diagonal-cut::before {
  right: 0;
  bottom: 0;
  background: var(--color-orange);
  clip-path: polygon(100% 0, 100% 100%, 8% 100%);
}
.pdcs-diagonal-cut::after {
  right: 0;
  bottom: 0;
  background: var(--color-navy);
  clip-path: polygon(100% 14%, 100% 100%, 26% 100%);
}
.pdcs-diagonal-cut[data-corner="tl"]::before {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  clip-path: polygon(0 0, 92% 0, 0 100%);
}
.pdcs-diagonal-cut[data-corner="tl"]::after {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  clip-path: polygon(0 0, 74% 0, 0 86%);
}
.pdcs-diagonal-cut[data-corner="tr"]::before {
  right: 0;
  top: 0;
  bottom: auto;
  clip-path: polygon(100% 0, 100% 86%, 8% 0);
}
.pdcs-diagonal-cut[data-corner="tr"]::after {
  right: 0;
  top: 0;
  bottom: auto;
  clip-path: polygon(100% 0, 100% 72%, 26% 0);
}
.pdcs-diagonal-cut[data-corner="bl"]::before {
  left: 0;
  bottom: 0;
  right: auto;
  clip-path: polygon(0 0, 0 100%, 92% 100%);
}
.pdcs-diagonal-cut[data-corner="bl"]::after {
  left: 0;
  bottom: 0;
  right: auto;
  clip-path: polygon(0 14%, 0 100%, 74% 100%);
}
.pdcs-diagonal-cut[data-on="navy"]::before { background: var(--color-orange); }
.pdcs-diagonal-cut[data-on="navy"]::after  { background: var(--color-navy); }