/*
 * Tokens Salon Little Wellness — bron: Stijlgids.dc.html (Claude Design, versie 1.0).
 *
 * 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, sectie Kleur) */
	--linnen: #f3eee6;      /* achtergrond van alle pagina's */
	--inkt: #28302a;        /* tekst, lijnen, footer */
	--pruim: #6e3290;       /* hoofdkleur: knoppen, bovenregels, prijzen */
	--aubergine: #3a1f48;   /* donkere secties met watermerk */
	--lila: #e8e0eb;        /* zachte vlakken en kaarten */
	--blad: #8db33a;        /* stippen en details, niet voor tekst op licht */
	--mos: #5e7f1f;         /* groene tekst op licht */
	--lichtgroen: #b5d46a;  /* bovenregels op donker */
	--grijs: #6b706a;       /* bijschriften en labels */
	--wit: #ffffff;
	/* Signaalkleuren SEO-score in het beheer (inc/seo-score.php): minstens 3:1 op wit */
	--signaal-groen: var(--mos);
	--signaal-oranje: #b86e00;
	--signaal-rood: #b3261e;
	--signaal-grijs: #8c918a;

	/* Tekstvarianten: Grijs en Mos halen als kleine tekst op Linnen/Lila geen AA (4,34 en 4,01).
	   Voor tekst deze iets donkerdere waarden (min. 4,6 op Linnen, Lila en wit); vlakken en
	   stalen blijven de merkkleur. */
	--grijs-tekst: #616560;
	--mos-tekst: #4f6b1a;

	/* Afgeleide tekst- en lijnkleuren uit het ontwerp */
	--tekst-intro: #3e453f;
	--tekst: #4a514b;
	--tekst-op-donker: #e4dde8;      /* lopende tekst op aubergine */
	--footer-tekst: #d8d4cb;
	--footer-stil: #a9aca5;
	--hover-lichtgroen: #d3e6a4;      /* ook bovenregel op pruim */
	--lila-licht: #efe8f1;           /* hover in menu en behandellijst */
	--lila-hover-op-donker: #d9c4e6; /* hover linnen knop op aubergine (home) */
	--tekst-op-pruim: #e4d6ec;
	--zand: #dcd3c6;                 /* vlak achter foto's die nog laden */
	--aubergine-licht: #4e2c60;      /* vlak achter foto's op aubergine */
	--lijn: rgba(40, 48, 42, .18);
	--lijn-sectie: rgba(40, 48, 42, .15);
	--lijn-kaart: rgba(40, 48, 42, .08);
	--lijn-knop: rgba(40, 48, 42, .35);
	--lijn-op-donker: rgba(243, 238, 230, .35);
	--lijn-op-pruim: rgba(243, 238, 230, .3);
	--lijn-zacht: rgba(40, 48, 42, .12);
	--lijn-rand: rgba(40, 48, 42, .2);
	--schaduw-menu: 0 16px 40px rgba(40, 48, 42, .12);
	--sitekop-achtergrond: rgba(243, 238, 230, .94);
	--schaduw-zwevend: 0 10px 30px rgba(58, 31, 72, .3);
	--schaduw-icoon: 0 4px 14px rgba(40, 48, 42, .12);   /* app-icoon in de stijlgids */
	--schaduw-kaart: 0 24px 48px rgba(58, 31, 72, .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;
}