/* qruon design system — alle tokens en basisregels in één bestand.
   Bron: design_handoff_restyle/qruon-tokens.css (qruon Design System, 16 september 2026).
   Enige afwijking: het fontblok laadt Public Sans en IBM Plex Mono lokaal (geen Google Fonts),
   conform de privacyverklaring en de CSP (font-src 'self'). Wijzig tokens hier niet met de hand;
   haal ze opnieuw uit het design system. */

/* ======== tokens/fonts.css (lokaal gehost) ======== */
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/public-sans-variable.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2")}

/* ======== tokens/colors.css ======== */
:root{
  /* base — forest */
  --green-900:#0E241B;--green-800:#163024;--green-700:#1F4435;--green-600:#2A5A45;
  --green-500:#357257;--green-300:#8FB3A1;--green-200:#C3D8CC;--green-100:#DEEAE2;--green-50:#F0F5F1;
  /* base — warm neutrals (paper) */
  --paper:#FBFAF7;--sand-50:#F5F3ED;--sand-100:#EDEAE1;--sand-200:#DFDBD0;--sand-300:#CBC6B8;
  --graphite-400:#8A8C84;--graphite-600:#5C5F57;--graphite-800:#33352F;--ink:#191A16;--white:#FFFFFF;
  /* base — accent + semantics */
  --ochre-600:#B0741F;--ochre-500:#C8892B;--ochre-100:#F7ECD9;
  --red-600:#9E2B25;--red-100:#F8E4E2;
  --blue-600:#23566B;--blue-100:#E1EDF1;

  /* semantic — text */
  --text-strong:var(--ink);--text-body:var(--graphite-800);--text-muted:var(--graphite-600);
  --text-subtle:var(--graphite-400);--text-inverse:var(--paper);--text-brand:var(--green-700);
  --text-link:var(--green-700);--text-link-hover:var(--green-900);
  /* semantic — surface */
  --surface-page:var(--paper);--surface-card:var(--white);--surface-sunken:var(--sand-50);
  --surface-raised:var(--white);--surface-brand:var(--green-700);--surface-brand-soft:var(--green-50);
  --surface-accent-soft:var(--ochre-100);--surface-inverse:var(--green-900);
  /* semantic — line */
  --line-hairline:var(--sand-100);--line-default:var(--sand-200);--line-strong:var(--sand-300);
  --line-brand:var(--green-700);--line-focus:var(--green-500);
  /* semantic — status */
  --status-ok-fg:var(--green-700);--status-ok-bg:var(--green-50);
  --status-warn-fg:var(--ochre-600);--status-warn-bg:var(--ochre-100);
  --status-error-fg:var(--red-600);--status-error-bg:var(--red-100);
  --status-info-fg:var(--blue-600);--status-info-bg:var(--blue-100);
}

/* ======== tokens/typography.css ======== */
:root{
  --font-sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --font-display:var(--font-sans);

  --size-display-1:56px;--size-display-2:42px;--size-h1:32px;--size-h2:24px;--size-h3:19px;
  --size-body-lg:18px;--size-body:16px;--size-body-sm:14px;--size-caption:13px;--size-micro:11px;

  --lh-tight:1.06;
  --lh-snug:1.2;
  --lh-normal:1.5;
  --lh-relaxed:1.62;
  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
  --track-display:-0.022em;--track-heading:-0.012em;--track-body:0em;--track-label:0.08em;--track-mono:0.01em;

  /* semantic roles */
  --type-display:var(--weight-semibold) var(--size-display-1)/var(--lh-tight) var(--font-display);
  --type-h1:var(--weight-semibold) var(--size-h1)/var(--lh-snug) var(--font-display);
  --type-h2:var(--weight-semibold) var(--size-h2)/var(--lh-snug) var(--font-display);
  --type-h3:var(--weight-semibold) var(--size-h3)/1.35 var(--font-sans);
  --type-body:var(--weight-regular) var(--size-body)/var(--lh-relaxed) var(--font-sans);
  --type-body-sm:var(--weight-regular) var(--size-body-sm)/var(--lh-normal) var(--font-sans);
  --type-label:var(--weight-medium) var(--size-caption)/1.3 var(--font-sans);
  --type-eyebrow:var(--weight-medium) var(--size-micro)/1.2 var(--font-mono);
}

/* ======== tokens/spacing.css ======== */
:root{
  --space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --gutter:24px;--page-pad:32px;--section-y:96px;
  --measure:64ch;--container:1200px;--container-narrow:760px;
}

/* ======== tokens/shape.css ======== */
:root{
  --radius-0:0px;--radius-sm:3px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;--radius-pill:999px;
  --border-hairline:1px;--border-default:1px;--border-thick:2px;
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(14,36,27,.06);
  --shadow-md:0 1px 2px rgba(14,36,27,.05),0 4px 12px rgba(14,36,27,.06);
  --shadow-lg:0 2px 4px rgba(14,36,27,.04),0 16px 40px rgba(14,36,27,.10);
  --shadow-inset-line:inset 0 -1px 0 rgba(14,36,27,.08);
  --ring-focus:0 0 0 3px rgba(53,114,87,.28);
}

/* ======== tokens/motion.css ======== */
:root{
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-instant:80ms;
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:360ms;
  --transition-ui:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}

/* ======== tokens/base.css ======== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-strong)}
h1{font:var(--type-h1);letter-spacing:var(--track-heading)}
h2{font:var(--type-h2);letter-spacing:var(--track-heading)}
h3{font:var(--type-h3)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--green-200);transition:var(--transition-ui)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--green-700)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.q-wordmark{font-family:var(--font-display);font-weight:var(--weight-semibold);letter-spacing:-0.03em;color:var(--text-brand);text-transform:lowercase}
.q-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.q-rule{height:1px;background:var(--line-default);border:0}
@keyframes q-spin{to{transform:rotate(360deg)}}
@keyframes q-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes q-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ======== tokens/layout.css ======== */
:root{--bp-lap:980px;--bp-tab:760px;--bp-phone:560px}
.q-shell{max-width:var(--container);margin:0 auto}
.q-grid-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.q-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.q-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.q-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.q-grid-footer{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--gutter)}
.q-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.q-split{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.q-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.q-sitehead{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
@media (max-width:980px){
  .q-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-grid-hero{gap:44px}
  .q-grid-2{gap:44px}
}
@media (max-width:860px){
  .q-grid-hero,.q-grid-2{grid-template-columns:minmax(0,1fr)}
  .q-grid-footer{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .q-sitehead{gap:20px}
  .q-hide-sm{display:none}
}
@media (max-width:760px){
  :root{--page-pad:20px;--section-y:64px;--gutter:16px}
}
@media (max-width:560px){
  .q-grid-3,.q-grid-4,.q-grid-footer,.q-fields{grid-template-columns:minmax(0,1fr)}
  .q-split{align-items:flex-start;gap:20px}
}