/* =============================================================================
   BRAAF. — iframe.css: gedeelde foundation voor de artikel-demo's
   hallobraaf.nl/assets/demos/

   Elke demo blijft standalone (eigen CSS/JS, geïsoleerd van de
   skeleton-laag), maar de familie deelt één vormgeving: fonts, kleur-
   ankers, maatvoering en basis-idioom komen hiervandaan — demo-eigen
   styling (de mechaniek van het voorbeeld zelf) blijft inline in de
   demo-HTML.

   Demo's zijn DONKER (2026-08-12): ze draaien als full-bleed cover op
   de artikel-pagina's, waar de body als ink start — de demo-surface
   is hetzelfde Rich Black, zodat iframe en pagina één vlak vormen.
   Fonts zijn dezelfde files als de site (zelfde origin, dus cache).

   Maatvoering is px, bewust: een demo is een mini-app op eigen schaal,
   los van de fluid em-cascade van de site.
   ============================================================================= */

@font-face {
	font-family: 'Helvetica Now Display';
	src: url('/assets/fonts/HelveticaNow/HelveticaNowDisplay-Medium.woff2') format('woff2');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Helvetica Now Display';
	src: url('/assets/fonts/HelveticaNow/HelveticaNowDisplay-Black.woff2') format('woff2');
	font-weight: 900; font-style: normal; font-display: swap;
}

:root {
	/* site-ankers (skeleton.css is de bron van deze waarden) */
	--black: #020d19;      /* Rich Black — pagina/tekst-zwart van de site */
	--black-soft: #101720; /* Midnight Blue — vlak-zwart, kaarten/vlakken */
	--white: #fafafa;      /* Antiflesh */
	--accent: #ffcd00;     /* braaf-geel */

	/* demo-trio (donker): surface = pagina, card = vlak, ink = tekst.
	   Ink is het warme is-ink-wit van de site, bewust ≠ --white. */
	--surface: var(--black);
	--card: var(--black-soft);
	--ink: #eeefeb;
	--hairline: color-mix(in srgb, var(--ink) 18%, transparent);

	/* functionele kleuren (bibliotheek-ankers) + tekst-varianten die op
	   donker genoeg contrast houden — mix richting de ink, anker blijft
	   de bron */
	--signal: #0057FF;  /* Signal Blue — voortgang/actief */
	--ok:     #064E3B;  /* Emerald Ink */
	--err:    #9a0002;  /* Cherry Cola */
	--signal-text: color-mix(in srgb, var(--signal) 55%, var(--ink));
	--ok-text:     color-mix(in srgb, var(--ok) 45%, var(--ink));
	--err-text:    color-mix(in srgb, var(--err) 55%, var(--ink));

	/* vorm-ladder — de ui-maten van de demo-familie */
	--radius: 12px;   /* vlakken (dropzones, panelen) */
	--radius-s: 8px;  /* elementen ín een vlak (reepjes, thumbs) */
	--radius-xs: 7px; /* knopjes */
}

*, *::before, *::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* reset-wet van de site: controls erven het demo-font */
button, input, select, textarea { font: inherit; }

body {
	margin: 0; padding: 48px 24px;
	background: var(--surface); color: var(--ink);
	font: 500 15px/1.5 'Helvetica Now Display', 'Helvetica Neue', sans-serif;
}
main { max-width: 560px; margin: 0 auto; }

/* demo-kop: titel + één toelichtende regel — elke demo opent zo */
h1 { font-size: 18px; font-weight: 900; margin: 0 0 4px; }
main > p { margin: 0 0 24px; opacity: .55; font-size: 13px; }

::selection { background: var(--accent); color: var(--black); }
:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }