/* ============================================================
   Skin "sorbet" (thema modern + skin = sorbet): vaste tokens.
   Geladen in de <head> na tokens.css en de shop-tokens, dus deze
   waarden winnen. Speels maar netjes: crème als ondergrond,
   inktzwart voor tekst en randen van 2 px, roze knoppen met
   inkttekst en een kleine "sticker"-schaduw (2-3 px, geen blur),
   pastelvlakken (munt, lila, zand, hemel, geel) voor tegels en
   blokken. Rond (16-24 px, knoppen als pil). Titels in Sorbet
   Display (Fraunces zacht), tekst en UI in Sorbet UI (Chivo).
   Bronnen van de waarden: docs/theme-modern.md (skin sorbet).

   Contrast (WCAG 2.x):
     ink #0A0A0A op bg 19.2, op crème 17.2, op roze 9.8, op elk
       pastel >= 10.3 (blauw) -- tekst op een vlak is altijd ink.
     ink-soft #3B372E op bg 11.5, op crème 10.3.
     ink-mute #5C5647 op bg 7.1, op crème 6.4, op pastel >= 5.1;
       NIET op roze of blauw (3.6/3.8).
     pink-text #9E1F55 op bg 7.3, op crème 6.6: links, "vanaf".
     roze #F19DC3 is nooit tekst: enkel vlak met inkttekst.
   ============================================================ */
:root {
	--so-bg: #fffbf0;
	--so-surface: #ffffff;
	--so-cream: #fcefc3;
	--so-cream-soft: #fef6dc;
	--so-ink: #0a0a0a;
	--so-ink-soft: #3b372e;
	--so-ink-mute: #5c5647;
	--so-pink: #f19dc3;
	--so-pink-hover: #ec88b6;
	--so-pink-tint: #fbe3ee;
	--so-pink-text: #9e1f55;
	--so-mint: #d0efd6;
	--so-lilac: #efd1f2;
	--so-sand: #f4e4d0;
	--so-sky: #d1d9e8;
	--so-blue: #95bfe7;
	--so-yellow: #fbe38a;
	--so-line: #e8dcb8;
	--so-line-strong: var(--so-ink);
	--so-border: 2px solid var(--so-ink);
	--so-sticker: 3px 3px 0 var(--so-ink);
	--so-sticker-sm: 2px 2px 0 var(--so-ink);
	/* Golfrand (een speelse rand), als masker onderaan een vlak. */
	--so-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v6c-10 0-10 6-20 6S90 6 80 6 70 12 60 12 50 6 40 6 30 12 20 12 10 6 0 6z'/%3E%3C/svg%3E");
	--so-font-display: 'Sorbet Display', 'Fraunces', 'Cooper Black', Georgia, serif;
	--so-font-ui: 'Sorbet UI', 'Chivo', 'Helvetica Neue', Arial, sans-serif;

	/* Type in hele pixels (tests/unit/AtelierTypeTest.php). Kapitalen enkel voor
	   kleine labels (tags, prijslabel): 12 px, 1 px spatiëring, regel 16 px. */
	--so-tag-size: 12px;
	--so-tag-track: 1px;
	--so-tag-line: 16px;
	--so-nav-size: 15px;
	--so-nav-line: 20px;
	--so-btn-size: 16px;
	--so-btn-line: 20px;
	/* Display (Fraunces): nooit onder 24 px, zoals couture; kleiner wordt de
	   zachte schreef een vlek op 1x-schermen. Geen spatiëring. */
	--so-display-track: 0px;

	/* De gedeelde tokens van modern op de Sorbet-waarden. */
	--shop-brand: var(--so-pink);
	--shop-brand-deep: var(--so-pink-hover);
	--shop-brand-tint: var(--so-pink-tint);
	--shop-brand-text: var(--so-pink-text);
	--shop-fg-on-brand: var(--so-ink);
	--shop-fg-on-brand-deep: var(--so-ink);
	--shop-accent: var(--so-blue);
	--shop-fg-on-accent: var(--so-ink);
	--shop-accent-quiet: var(--so-sky);
	--shop-fg-1: var(--so-ink);
	--shop-fg-2: var(--so-ink-soft);
	--shop-fg-3: var(--so-ink-mute);
	--shop-bg-1: var(--so-bg);
	--shop-bg-2: var(--so-cream-soft);
	--shop-bg-3: var(--so-cream);
	--shop-border: var(--so-line);
	--shop-border-strong: var(--so-ink);
	--shop-font-sans: var(--so-font-ui);
	--shop-font-ui: var(--so-font-ui);
	--shop-font-display: var(--so-font-display);
	--shop-r-sm: 10px;
	--shop-r-md: 16px;
	--shop-r-lg: 24px;
	--shop-r-card: 20px;
	--shop-r-pill: 999px;
	--shop-shadow-sm: none;
	--shop-shadow-md: var(--so-sticker-sm);
	--shop-shadow-lg: var(--so-sticker);
	--shop-shadow-brand: var(--so-sticker-sm);
	--shop-focus-ring: 0 0 0 2px var(--so-bg), 0 0 0 4px var(--so-ink);
	--shop-lift: 0px;
	--shop-tracking-tight: 0;
}