/* Verbinn design tokens — Ruberio × Uit De Verf.
   Normatief volgens verbinn-plan/04-BRANDING-UI-UX.md. Kobalt = systeem, oranje = mens.
   Fonts lokaal gebundeld (woff2) — nooit runtime-requests naar buiten (privacy-invariant).
   Contrast gevalideerd: kobalt/papier 6,6:1 · wit/kobalt 6,9:1 · inkt/geel 11,9:1.
   Geel draagt nooit tekst of data — alleen accentvlakken met inkt erop. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
:root {
  /* Ruberio-kern (geverifieerd uit ruberio.com) */
  --cobalt:#2742e8; --deep:#1a2bb5; --ink:#10153a; --paper:#fbfaf6;
  --cream:#f6f2ea; --yellow:#ffce1f; --muted:#5b6485;
  /* UdV-mensaccent (geverifieerd uit uitdeverf.com) */
  --warm:#e46333; --warm-deep:#a83807;
  /* functioneel */
  --ok:#1d7a3c; --error:#b3261e; --rec:#d02020; --line:#e5e0d2; --surface:#ffffff;
  /* zachte vlakken (dashboard-redesign, 10 juli 2026): het enige gekleurde vlak
     per scherm is de (privacy)belofte in kobalt-zacht; haarlijn-zacht scheidt
     rijen binnen een groep zonder te schreeuwen */
  --cobalt-soft:#eaedfc; --line-soft:#f1eee3; --warm-soft:#fdf0e8; --ok-soft:#e8f4ea;
  /* dataviz-rollen */
  --grid:#e9e5d8; --series-1:var(--cobalt);
  /* typografie — twee-font-systeem (doc 04, besloten 10 juli 2026):
     Bricolage = display/koppen/cijfers · Hanken = body/transcript/verslag ·
     Fredoka = exclusief het woordmerk */
  --font-brand:"Fredoka","Bricolage Grotesque",system-ui,sans-serif;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  /* motie-tokens (UI-concept §3.1 + polish-golf 10 juli 2026):
     sterke curves — de ingebouwde CSS-easings zijn te slap voor UI die
     "af" moet voelen. ease-out voor alles dat binnenkomt of reageert,
     ease-in-out voor verplaatsing op het scherm. */
  --t-fast:150ms; --t-base:200ms; --t-press:160ms;
  --t-ease:cubic-bezier(.2,.8,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* skeleton-laadstaat (UI-concept §3.1) */
  --skeleton:linear-gradient(90deg,var(--cream) 25%,#efe9dd 50%,var(--cream) 75%);
  /* maat & vorm */
  --r-s:8px; --r-m:14px; --r-l:22px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --shadow-card:0 1px 3px rgba(16,21,58,.08),0 4px 16px rgba(16,21,58,.06);
  --shadow-float:0 8px 32px rgba(16,21,58,.16);
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--font-body); color:var(--ink); background:var(--paper);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}

/* Typografische schaal (§2.2) */
h1 { font-family:var(--font-display); font-weight:700; font-size:28px; line-height:34px; letter-spacing:-0.02em; color:var(--ink); }
h2 { font-family:var(--font-display); font-weight:700; font-size:20px; line-height:26px; letter-spacing:-0.01em; color:var(--ink); }
h3 { font-family:var(--font-display); font-weight:600; font-size:15px; line-height:20px;
     text-transform:uppercase; letter-spacing:.06em; color:var(--cobalt); }
.num { font-variant-numeric:tabular-nums; }
.display-num { font-family:var(--font-display); font-weight:700; font-size:40px; line-height:44px;
     letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }

a { color:var(--cobalt); }
button { font-family:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; font-size:15px; color:var(--ink); }
::selection { background:var(--yellow); color:var(--ink); }

/* Zichtbare focus-ring: 2px kobalt op 2px offset (§7) */
:focus-visible { outline:2px solid var(--cobalt); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }