/* colors */
:root{
/* Base — measured from Portfolio Buro Reni.pdf, logo PDFs and BR-signature.html */
--br-white:#FFFFFF;
--br-black:#000000;
--br-logo-ink:#1D1D1B;      /* logo (horizontaal) */
--br-logo-ink-1x1:#2C2E35;  /* logo (vierkant) */
--br-grey-700:#4A4A49;      /* lopende tekst CV-pagina */
--br-grey-500:#767676;      /* labels in showcase-modus (4.5:1 op wit) */
--br-grey-300:#BDBDBD;
--br-grey-100:#F2F2F2;
--br-periwinkle:#94ABFF;     /* merkkleur: titels, coverpagina */
--br-periwinkle-deep:#869BF1;/* iconen in e-mailhandtekening */
--br-periwinkle-ink:#3D55C4; /* donkere variant voor tekst/links op wit (contrast) */
--br-lilac-tint:#F3F0FF;     /* zachte achtergrond (GlowGirl-pagina's) */
--br-lime:#DDF5A6;           /* tweede tint (2026): markeringen, stickers, CTA-vlak */
--br-lime-deep:#C6EA78;      /* hover op lime */
--br-error:#B3261E;

/* Semantic */
--surface-page:var(--br-white);
--surface-brand:var(--br-periwinkle);
--surface-soft:var(--br-lilac-tint);
--surface-inverse:var(--br-black);
--surface-accent:var(--br-lime);
--mark-on-paper:var(--br-lime);
--mark-on-brand:var(--br-lime);
--mark-on-accent:var(--br-periwinkle);
--mark-on-inverse:var(--br-periwinkle);  /* als tekstkleur */
--text-body:var(--br-black);
--text-muted:var(--br-grey-700);
--text-title:var(--br-black);
--text-label:var(--br-grey-500);
--surface-row-hover:var(--br-lime);
--border-hairline:var(--br-black);
--text-on-brand:var(--br-black);
--text-on-inverse:var(--br-white);
--text-link:var(--br-black);
--text-link-hover:var(--br-periwinkle-ink);
--border-strong:var(--br-black);
--border-subtle:rgba(0,0,0,.12);
--focus-ring:var(--br-periwinkle);
}

/* typography */
:root{
/* Eén familie: Geist Mono. Groot = altijd Regular 400. UI = 14px CAPS. Bold alleen nog in de presentatie-covers. */
--font-display:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
--font-body:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
--font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
--font-sans:"Lufga",system-ui,sans-serif;

--weight-regular:400;
--weight-bold:700;   /* legacy — niet gebruiken in de site */
--weight-black:800;  /* alleen het ghost-woord op presentatie-covers */

/* Schaal (showcase, web): mega = "reisblog"/tellers · display-xl = case-titel · display = home-statement · h3 = intro */
--t-mega:clamp(72px,13vw,240px); /* @kind font */
--t-display-xl:clamp(44px,6.4vw,124px); /* @kind font */
--t-display:clamp(40px,6vw,108px); /* @kind font */
--t-h2:clamp(32px,4.4vw,64px); /* @kind font */
--t-h3:clamp(24px,2.6vw,40px); /* @kind font */
--t-ui:14px;      /* menu, labels, rijen, meta — altijd CAPS */
--t-body:16px;    /* lange leestekst, sentence case */
--t-lead:15px;    /* regel onder het statement */
--t-small:14px;
--t-caption:13px; /* werktitels onder beeld */
--t-tag:12px;     /* tags op beeld, knoppen */
/* Presentatie 1920×1080: ghost 300 · titel 100 · kop 48 · tekst 26 */
--t-ghost:clamp(80px,15.6vw,300px); /* @kind font */

--lh-display:.95; /* @kind font */
--lh-heading:1.1; /* @kind font */
--lh-ui:1.45; /* @kind font */
--lh-body:1.65; /* @kind font */

--track-mega:-.075em;
--track-display:-.06em;
--track-heading:-.035em;
--track-body:0; /* @kind font */
--track-caps:0; /* @kind font */
--track-button:.14em;  /* knoppen */
--track-spaced:0; /* @kind font */

--ghost-on-brand:rgba(255,255,255,.35);
--ghost-on-paper:rgba(148,171,255,.35);
}

/* spacing */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:100px;--space-10:140px;

--frame:12px;              /* afstand kader ↔ schermrand op home */
--gutter:26px;             /* paginamarge */
--gutter-mobile:16px;
--row-pad:9px 14px;        /* genummerde index-rijen */
--container:1200px;
--container-text:62ch;
--block-gap:0px;           /* beelden in een case staan tegen elkaar */
--section-gap:120px;
--header-top:20px;
--menubar-h:0px;           /* legacy (menubalk vervalt) */

--hairline:1px solid var(--br-black);
--radius-0:0;
--radius-tag:4px;          /* tags op beeld */
--radius-field:0;          /* velden: haarlijn-kader */
--radius-pill:999px;       /* knoppen */

--shadow-none:none;
--shadow-panel:0 12px 40px rgba(0,0,0,.14);

--ease:ease; /* @kind other */
--ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-inout:cubic-bezier(.7,0,.2,1); /* @kind other */
--dur-fast:.2s; /* @kind other */
--dur-base:.3s; /* @kind other */
--dur-slow:.6s; /* @kind other */
--dur-page:.7s; /* @kind other */
--dur-open:.8s; /* @kind other */
--dur-zoom:1.1s; /* @kind other */
--dur-reveal:1.2s; /* @kind other */
}

/* base */
/* Minimal element defaults so cards and kits share one baseline */
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--track-body)}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--br-periwinkle);color:var(--br-black)}