/*
 * Tokens Salon Little Wellness — bron: Stijlgids v2.dc.html (Claude Design, versie 2.0, kleur en logo).
 *
 * Breakpoints (custom properties werken niet in @media; gebruik exact deze waarden):
 *   360 · 390 · 768 · 1024 · 1280 · 1440 · 1920 px
 * Het ontwerp is vloeiend (clamp(), auto-fit); media queries alleen waar de layout omschakelt.
 */

@font-face {
	font-family: "Gloock";
	src: url("../fonts/gloock-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kaushan Script";
	src: url("../fonts/kaushan-script-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Merkkleuren (stijlgids versie 2.0, sectie Kleur; magenta en oudroze uit het ronde logo).
	   Groen is vervallen. Verhouding: 60% linnen · 20% inkt · 15% magenta · 5% oudroze. */
	--linnen: #f3eee6;      /* achtergrond van alle pagina's */
	--inkt: #2b1f27;        /* tekst, lijnen, footer: warm donker, zonder groenzweem */
	--magenta: #780060;     /* hoofdkleur uit de logorand: knoppen, bovenregels, prijzen */
	--aubergine: #3e0f35;   /* donkere secties en de footer */
	--oudroze: #c591a8;     /* vlakkleur uit het logo: stippen en details, niet voor tekst op licht */
	--lichtroze: #e4b9cc;   /* bovenregels en accenten op donker */
	--poederroze: #f0e1e8;  /* zachte vlakken en kaarten */
	--grijs: #6e6468;       /* bijschriften en labels */
	--goud: #d9ae66;        /* ALLEEN tijdelijke acties (banner en kaart), zodat die uit het design springen.
	                           Inkt erop 7,7 en de magenta knop 5,2 (AA). Nooit voor tekst op licht. */
	--wit: #ffffff;
	/* Signaalkleuren SEO-score in het beheer (inc/seo-score.php): minstens 3:1 op wit.
	   Groen blijft hier als signaal (goed), los van de huisstijl. */
	--signaal-groen: #4f7a1f;
	--stip-online: #5ad16e;          /* "online"-stip in de zwevende knop Boek online (alleen decoratief) */
	--signaal-oranje: #b86e00;
	--signaal-rood: #b3261e;
	--signaal-grijs: #8c8488;

	/* Tekstvariant van Grijs: 4,9 op Linnen, 4,5 op Poederroze, 5,7 op wit (AA). */
	--grijs-tekst: #6e6468;

	/* Afgeleide tekst- en lijnkleuren (stijlgids v2) */
	--tekst-intro: #3f3339;
	--tekst: #4e4248;
	--tekst-op-donker: #ebdce3;      /* lopende tekst op aubergine */
	--footer-tekst: #ebdce3;
	--footer-stil: #c9b6bf;          /* 7,9 op aubergine */
	--roze-zacht: #ebdce3;           /* hover linnen knop, bovenregel op magenta */
	--poederroze-licht: #f6edf1;     /* hover in menu en behandellijst */
	--roze-hover-op-donker: #e4b9cc; /* hover linnen knop op aubergine (home) */
	--tekst-op-magenta: #f3e6ec;
	--zand: #e3d8d4;                 /* vlak achter foto's die nog laden */
	--aubergine-licht: #5a2150;      /* vlak achter foto's op aubergine */
	--lijn: rgba(43, 31, 39, .18);
	--lijn-sectie: rgba(43, 31, 39, .15);
	--lijn-kaart: rgba(43, 31, 39, .08);
	--lijn-knop: rgba(43, 31, 39, .35);
	--lijn-op-donker: rgba(243, 238, 230, .35);
	--lijn-op-magenta: rgba(243, 238, 230, .3);
	--lijn-zacht: rgba(43, 31, 39, .12);
	--lijn-rand: rgba(43, 31, 39, .2);
	--schaduw-menu: 0 16px 40px rgba(43, 31, 39, .12);
	--sitekop-achtergrond: rgba(243, 238, 230, .94);
	--schaduw-zwevend: 0 10px 30px rgba(62, 15, 53, .3);
	--schaduw-icoon: 0 4px 14px rgba(43, 31, 39, .12);   /* app-icoon in de stijlgids */
	--schaduw-kaart: 0 24px 48px rgba(62, 15, 53, .3);   /* bloemkaart bij aanwijzen (homepage) */

	/* Typografie */
	--font-kop: "Gloock", Georgia, serif;
	--font-tekst: "Hanken Grotesk", system-ui, sans-serif;
	--font-mono: ui-monospace, Menlo, monospace;
	/* Accentletter (handschrift van het bord in de salon): alleen citaten en de tagline,
	   altijd groot (vanaf 22px). Nooit voor lopende tekst, koppen, menu of knoppen. */
	--font-accent: "Kaushan Script", "Brush Script MT", cursive;

	/* Maten */
	--max-breedte: 1200px;
	--max-breedte-footer: 1280px;
	--max-breedte-breed: 1280px;     /* sitekop en homepage */
	--gutter: clamp(20px, 4vw, 48px);
	--sectie-ruimte: clamp(56px, 7vw, 96px);
	--radius: 8px;
	--radius-pil: 999px;
}