/*
  Rosewood — kleur- en typografietokens
  Schoonheidsstudio Ingrid Buelens
  Basisinstructie 14.1 en 14.2, versie 0.1.0

  Deze tokens zijn de enige bron voor kleur en typografie. Gebruik nooit een
  losse hexwaarde in een Elementor-widget of in componentstijlen; verwijs altijd
  naar een token, zodat een merkwijziging op één plek gebeurt.
*/

:root {
	/* ---- Rosewood-palet, basisinstructie 14.1 ---- */
	--paper: #f5efe8;        /* hoofdachtergrond */
	--paper-2: #ece2d5;      /* afwisselende secties */
	--bone: #e5d8c8;         /* kaarten en zachte vlakken */
	--ink: #2b201b;          /* primaire tekst en donkere knoppen */
	--ink-soft: #4a3a33;     /* secundaire tekst */
	--muted: #8a7a70;        /* alleen decoratief: randen, iconen, scheiders */
	--muted-text: #6a5d55;   /* gedempte tékst — zie hieronder */
	--warm: #b09080;         /* decoratieve ondersteuning */
	--accent: #a56a5e;       /* grote tekst, iconen en decoratie */
	--accent-soft: #c99a8f;  /* zachte accenten op donkere achtergrond */

	/*
	  Gedempte tekst.

	  --muted (#8a7a70) haalt op --paper maar 3,61:1, op --paper-2 3,22:1 en op
	  --bone 2,94:1. Het is dus nergens bruikbaar voor tekst, ook niet op het
	  lichtste vlak — een eerdere opmerking hier beweerde dat wel en dat klopte
	  niet. Kruimelpad, bronvermelding en de inhoudsmaat bij een product stonden
	  daardoor alle drie onder de norm.

	  --muted-text is dezelfde tint, donker genoeg om overal te voldoen:
	  op --paper 5,56:1 / op --paper-2 4,96:1 / op --bone 4,53:1.
	  --muted blijft bestaan voor wat geen tekst is: randen, scheiders, iconen.

	  Toegankelijk accent voor tekst.

	  --accent (#a56a5e) haalt op --paper (#f5efe8) ongeveer 3,81:1. Dat voldoet
	  wel voor grote tekst (18,66 px vet of 24 px normaal) en voor niet-tekstuele
	  elementen, maar niet voor gewone lopende tekst of links in een tekstblok.

	  --accent-text moet op alle drie de lichte vlakken van het palet voldoen, en
	  niet alleen op het lichtste. Dat ging eerst mis: #9a5348 haalt op --paper
	  wel 4,96:1, maar op --paper-2 nog 4,43:1 en op --bone maar 4,05:1. Precies
	  de plek waar het meest gebruikt wordt — de links in een behandelkaart staan
	  op --bone — zakte dus onder de norm.

	  Deze waarde is berekend als de donkerste variant van dezelfde tint die op
	  alle drie boven 4,6:1 uitkomt, met wat marge omdat browsers afronden:

	      op --paper (#f5efe8)    5,67:1
	      op --paper-2 (#ece2d5)  5,06:1
	      op --bone (#e5d8c8)     4,62:1

	  Op --ink hoort dit accent niet thuis; gebruik daar --accent-soft.
	*/
	--accent-text: #8d4c42;

	/* Contrast op donkere achtergrond (--ink): --accent-soft haalt daar ruim 4,5:1. */
	--accent-on-dark: var(--accent-soft);

	/* ---- Statuskleuren, afgeleid van het palet ---- */
	--success: #46613f;
	--warning: #8a6320;
	--danger: #8f3a30;

	/* ---- Randen en scheidingen ---- */
	--line: rgba(43, 32, 27, 0.12);
	--line-strong: rgba(43, 32, 27, 0.24);

	/* ---- Typografie, basisinstructie 14.2 ---- */
	--font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/*
	  ---- Basiseenheid ----

	  TheGem zet in thegem-reset.css `html { font-size: 62.5% }`. Daardoor is
	  1rem in dit thema 10 px en niet 16 px, en is alle CSS van het parenttheme
	  op die 10 px gebouwd. Dat mag hier niet teruggedraaid worden: `html` weer
	  op 100% zetten maakt elke maat van TheGem zelf anderhalf keer te groot.

	  --basis vangt die aanname op één plek af. Alle maten hieronder rekenen
	  ermee, zodat de waarden leesbaar blijven (0.875 blijft "iets kleiner dan
	  normaal") én meebewegen als het parenttheme die reset ooit laat vallen.
	  Verdwijnt de 62,5%, dan wordt --basis simpelweg 1rem.

	  Media queries hebben dit niet nodig: daarin is rem altijd 16 px, ongeacht
	  wat er op het html-element staat. Die staan dus bewust in gewone rem.
	*/
	--basis: 1.6rem;         /* = 16 px bij de 62,5%-reset van TheGem */

	/* Vloeiende schaal, mobile-first vanaf 320 px, basisinstructie 15 */
	--fs-xs: calc(var(--basis) * 0.8125);
	--fs-sm: calc(var(--basis) * 0.875);
	--fs-base: var(--basis);
	--fs-lg: clamp(calc(var(--basis) * 1.0625), calc(var(--basis) * 0.98) + 0.4vw, calc(var(--basis) * 1.1875));
	--fs-h4: clamp(calc(var(--basis) * 1.25), calc(var(--basis) * 1.13) + 0.6vw, calc(var(--basis) * 1.5));
	--fs-h3: clamp(calc(var(--basis) * 1.5), calc(var(--basis) * 1.3) + 1vw, calc(var(--basis) * 2));
	--fs-h2: clamp(calc(var(--basis) * 1.875), calc(var(--basis) * 1.55) + 1.6vw, calc(var(--basis) * 2.75));
	--fs-h1: clamp(calc(var(--basis) * 2.25), calc(var(--basis) * 1.75) + 2.5vw, calc(var(--basis) * 3.75));

	--lh-tight: 1.15;
	--lh-heading: 1.25;
	--lh-body: 1.65;
	--ls-display: -0.01em;
	--ls-caps: 0.08em;

	/* ---- Ruimte, radius, schaduw ---- */
	--space-1: calc(var(--basis) * 0.25);
	--space-2: calc(var(--basis) * 0.5);
	--space-3: calc(var(--basis) * 0.75);
	--space-4: var(--basis);
	--space-6: calc(var(--basis) * 1.5);
	--space-8: calc(var(--basis) * 2);
	--space-12: calc(var(--basis) * 3);
	--space-16: calc(var(--basis) * 4);

	/* Vaste breedtes voor de tekstkolommen, ook in --basis uitgedrukt. */
	--breedte-wrap: calc(var(--basis) * 72);    /* 1152 px */
	--breedte-smal: calc(var(--basis) * 46);    /*  736 px */
	--breedte-lezen: calc(var(--basis) * 44);   /*  704 px */

	--radius-sm: 3px;
	--radius: 6px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(43, 32, 27, 0.06);
	--shadow: 0 4px 16px rgba(43, 32, 27, 0.08);
	--shadow-lg: 0 12px 32px rgba(43, 32, 27, 0.12);

	/* ---- Beweging ---- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 120ms;
	--dur: 200ms;

	/* ---- Bediening, basisinstructie 15 ---- */
	--tap-min: 44px;         /* minimale klikdoelgrootte */
	--focus-ring: 2px solid var(--accent-text);
	--focus-offset: 2px;
}

/* ------------------------------------------------------------------ */
/*  Basistypografie                                                    */
/* ------------------------------------------------------------------ */

body {
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.title-h1, .title-h2, .title-h3, .title-h4 {
	font-family: var(--font-display);
	color: var(--ink);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-display);
}

h1, .title-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .title-h2 { font-size: var(--fs-h2); }
h3, .title-h3 { font-size: var(--fs-h3); }
h4, .title-h4 { font-size: var(--fs-h4); }

/* Cursief van Cormorant is bewust beperkt tot citaten en korte accenten. */
blockquote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-h4);
	color: var(--ink-soft);
	border-left: 3px solid var(--accent);
	padding-left: var(--space-6);
	margin-inline-start: 0;
}

h5, h6, .title-h5, .title-h6 {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	color: var(--ink);
}

p { color: var(--ink); }
small, .text-small { font-size: var(--fs-sm); color: var(--ink-soft); }

/* JetBrains Mono uitsluitend voor kleine numerieke of technische labels. */
.ssb-numeric,
.ssb-code,
code, kbd, samp {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

.text-muted {
	color: var(--muted-text);
	font-size: var(--fs-base);
}

a {
	color: var(--accent-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--dur) var(--ease);
}

a:hover,
a:focus-visible {
	color: var(--ink);
}

/* Zichtbare focus, basisinstructie 15. Nooit weghalen. */
:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
	border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ */
/*  Secties en vlakken                                                 */
/* ------------------------------------------------------------------ */

.ssb-section-alt { background-color: var(--paper-2); }
.ssb-card {
	background-color: var(--bone);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-6);
}

hr { border: 0; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ */
/*  Beweging respecteert de systeemvoorkeur, basisinstructie 14.3      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}