/****************************************************************************
 * tokens.css - huisstijl van i-reserve.io (redesign oktober 2026)
 *
 * De waarden zijn overgenomen uit de :root van i-reserve.io, met dezelfde
 * namen. Verandert de hoofdsite van kleur of letter, dan past dit bestand mee
 * en volgt teqa.css vanzelf. Alleen de i-Reserve-handleiding laadt dit; de
 * GASTO-shell (_gasto_main.php) heeft gasto.css.
 *
 * Laadt voor teqa.css. Vaste px voor maten: 1rem = 16px sinds Bootstrap 5.
 ***************************************************************************/

/* Sora (koppen) + DM Sans (tekst), zelf gehost zoals op i-reserve.io: geen
   request naar Google Fonts. Variabele fonts, vandaar de gewichtsbereiken. */
@font-face {
	font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url(../fonts/dmsans-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url(../fonts/dmsans-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Sora'; font-style: normal; font-weight: 500 600; font-display: swap;
	src: url(../fonts/sora-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Sora'; font-style: normal; font-weight: 500 600; font-display: swap;
	src: url(../fonts/sora-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
	/* merk */
	--brand-green-light: #a6e23f;
	--brand-green: #72be1b;
	--brand-green-dark: #3c8a0c;
	--brand-blue-light: #49b9ee;
	--brand-blue: #1667b5;
	--brand-blue-dark: #0e4e93;

	/* tekst en vlakken */
	--c-ink: #2c4351;
	--c-ink-strong: #0b2a3d;
	--c-ink-muted: #516475;
	--c-ink-faint: #8399a9;
	--c-line: #dbe4ec;
	--c-line-soft: #e8eef4;
	--c-surface: #ffffff;
	--c-surface-2: #edf2f6;
	--c-page: #f7f9fa;
	--c-sheet: #ffffff;
	--c-dark: #0b2a3d;
	--c-ink-invert: #c6d8e4;
	--c-ink-invert-strong: #ffffff;
	--c-ink-invert-muted: #9db2c2;
	--c-line-on-dark: #5c7183;

	/* accent en acties */
	--c-accent: var(--brand-blue);
	--c-accent-ink: var(--brand-blue-dark);
	--c-accent-soft: #e7f0f9;
	--c-tag-bg: #d9ebfa;
	--c-tag-ink: #0a3563;
	--c-cta: #2f6e09;
	--c-cta-hover: #265907;
	--c-cta-on: #ffffff;
	--c-focus: var(--brand-blue);

	/* typografie */
	--font-display: Sora, "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--tracking-tight: -0.015em;
	--tracking-label: 0.10em;

	/* vorm */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(20,41,58,.06);
	--shadow-md: 0 1px 2px rgba(20,41,58,.06), 0 8px 24px -16px rgba(20,41,58,.30);
	--grad-hero: linear-gradient(to bottom left, #d9ebfa 0%, #ffffff 55%, #ffffff 100%);
	--header-h: 69px;

	/* Rolkleur. Eigen aan de handleiding en bewust behouden: gebruiker blauw,
	   beheerder groen, ontwikkelaar oranje. _main.php zet de rol als klasse op
	   <body>; buiten die drie secties is de rol het inktblauw, zodat een
	   algemene pagina niet op een Gebruiker-pagina lijkt.
	   --role        vlakken, lijnen, iconen
	   --role-ink    tekst en links in de rolkleur (donkerder, leesbaar klein)
	   --role-soft   zachte achtergrond */
	--role: var(--c-ink-strong);
	--role-ink: var(--c-ink-strong);
	--role-soft: var(--c-surface-2);
}
.iresBlue {
	--role: #1667b5;
	--role-ink: #115290;
	--role-soft: #e7f0f9;
}
.iresGreen {
	--role: #67b516;
	--role-ink: #437a0d; /* 4.7:1 op --role-soft: leesbaar in de tags */
	--role-soft: #eff7e7;
}
.iresOrange {
	--role: #ec6714;
	--role-ink: #b44e0f;
	--role-soft: #fdefe7;
}