/* ============================================================
   Skin "atelier" (thema modern + skin = atelier): vaste tokens.
   Geladen in de <head> na tokens.css en de shop-tokens, dus deze
   waarden winnen. Wit is de basis, ivoor voor vlakken, cacao is de
   actiekleur; rood (--at-accent) alleen voor het script-woord, de
   mandjesteller en de prijs.

   Contrast (WCAG 2.x, gemeten):
     ink #2A1B0E op wit 16.7, op ivoor 14.7; ink-soft 9.0 / 8.0;
     heading-label 10.7 / 9.4; wit op cacao 16.7.
     accent #F4303C op wit 3.9: enkel grote tekst (>= 24px, prijs
       36px, script-woord); kleine prijzen en de teller gebruiken
       --at-accent-text #D92E3B (4.8 op wit).
     busy #9A6A00: 4.7 op wit (AA), 4.2 op ivoor (niet AA: geen
       busy-tekst op ivoor). ok #55A86A: 2.9, enkel als bolletje
       naast tekst, nooit als tekstkleur (tekst: --shop-pos).
   ============================================================ */
:root {
	--at-bg: #ffffff;
	--at-surface: #f7f0e4;
	--at-surface-deep: #f0e6d4;
	--at-ink: #2a1b0e;
	--at-ink-soft: #5c4430;
	--at-heading-label: #643000;
	--at-accent: #f4303c;
	--at-accent-text: #d92e3b;
	--at-accent-hover: #d92e3b;
	--at-ink-hover: #643000;
	--at-line: rgba(107, 63, 12, 0.18);
	--at-line-strong: rgba(107, 63, 12, 0.25);
	--at-tan: #e8d0b8;
	--at-ok: #55a86a;
	--at-busy: #9a6a00;
	--at-full: #d92e3b;
	--at-radius-img: 6px;
	--at-radius-choice: 12px;
	--at-radius-pill: 999px;
	--at-shadow-bar: 0 -8px 24px rgba(107, 63, 12, 0.08);
	--at-font: 'Pulp Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--at-font-script: 'Morning Memories', 'Brush Script MT', cursive;
	/* Kapitalen klein, in het UI-font (--shop-font-ui, bv. DM Sans; zie brandbook
	   p.11). Grootte, spatiëring en regelhoogte in hele pixels, anders vallen de
	   letters op halve pixels en worden ze wazig op 1x-schermen
	   (tests/unit/AtelierTypeTest.php). Eyebrow/label 13 px/600/0.22em -> 3 px;
	   categorieregel 13 px/600/2 px (keuze Jan 21/10/2026: rustiger dan de 15 px uit het brandbook). DM Sans 13 px: ascent+descent 16,93 px, regelhoogte 19 px -> basislijn op 13,93 px, kapitalen optisch gecentreerd. Regelhoogte - (ascent + descent)
	   is even, zodat de basislijn op een hele pixel valt. */
	--at-caps-size: 13px;
	--at-caps-track: 3px;
	--at-caps-line: 21px;
	--at-nav-size: 13px;
	--at-nav-track: 2px;
	--at-nav-line: 19px;

	/* De gedeelde tokens van modern op de Atelier-waarden. */
	--shop-brand: var(--at-ink);
	--shop-brand-deep: var(--at-ink-hover);
	--shop-brand-tint: var(--at-tan);
	--shop-brand-text: var(--at-ink);
	--shop-fg-on-brand: #ffffff;
	--shop-fg-on-brand-deep: #ffffff;
	--shop-accent: var(--at-ink);
	--shop-fg-on-accent: #ffffff;
	--shop-accent-quiet: var(--at-surface);
	--shop-fg-1: var(--at-ink);
	--shop-fg-2: var(--at-ink-soft);
	--shop-fg-3: var(--at-ink-soft);
	--shop-bg-1: var(--at-bg);
	--shop-bg-2: var(--at-surface);
	--shop-bg-3: var(--at-surface-deep);
	--shop-border: var(--at-line);
	--shop-border-strong: var(--at-line-strong);
	--shop-font-sans: var(--at-font);
	--shop-font-display: var(--at-font);
	--shop-r-sm: var(--at-radius-img);
	--shop-r-md: var(--at-radius-choice);
	--shop-r-lg: 14px;
	--shop-r-card: var(--at-radius-img);
	--shop-r-pill: var(--at-radius-pill);
	--shop-shadow-sm: none;
	--shop-shadow-md: none;
	--shop-shadow-lg: 0 18px 40px rgba(42, 27, 14, 0.12);
	--shop-shadow-brand: none;
	--shop-focus-ring: 0 0 0 3px rgba(42, 27, 14, 0.28);
	--shop-lift: 0px;
	--shop-tracking-tight: -0.03em;
}