/* ============================================================
   Skin "couture" (thema modern + skin = couture): vaste tokens.
   Geladen in de <head> na tokens.css en de shop-tokens, dus deze
   waarden winnen. Drie kleuren: wit, warm inktzwart (#1A171B) en
   goud (#BE9D40) enkel als dunne accent: lijntjes van
   1 px, het ornament (een kegel), iconen, de focusring en de knop op
   een donkere foto. Vierkant (radius 0), geen schaduwen, hairlines.
   Bronnen van de waarden: docs/theme-modern.md (skin couture).

   Contrast (WCAG 2.x, gemeten met shop_theme_contrast()):
     ink op wit 17.8, op #FAFAFA 17.0; wit op ink 17.8.
     ink-soft #5C595D op wit 6.9, op #FAFAFA 6.6.
     ink-mute #6B6B6B op wit 5.3, op #FAFAFA 5.1.
     goud #BE9D40 op wit 2.6: NOOIT tekst op wit; ink op goud 6.8
       (gouden knop = inktzwarte tekst), goud op ink 6.8.
     gold-text #86702D op wit 4.8 (AA): "vanaf", actieve links;
       niet op gold-tint (4.2).
     gold-deep #725E27 op wit 6.3 (hover van gold-text).
   ============================================================ */
:root {
	--tt-bg: #ffffff;
	--tt-surface: #fafafa;
	--tt-surface-deep: #f3f1ec;
	--tt-ink: #1a171b;
	--tt-ink-soft: #5c595d;
	--tt-ink-mute: #6b6b6b;
	--tt-gold: #be9d40;
	--tt-gold-light: #cbb06d;
	--tt-gold-text: #86702d;
	--tt-gold-deep: #725e27;
	--tt-gold-tint: #f4eedd;
	--tt-line: #e6e3dc;
	--tt-line-strong: #cfcfcf;
	--tt-overlay: linear-gradient(90deg, rgba(26, 23, 27, 0.8) 0%, rgba(26, 23, 27, 0.5) 55%, rgba(26, 23, 27, 0.18) 100%);
	--tt-overlay-mobile: linear-gradient(0deg, rgba(26, 23, 27, 0.86) 0%, rgba(26, 23, 27, 0.55) 55%, rgba(26, 23, 27, 0.15) 100%);
	--tt-font-display: 'Couture Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--tt-font-ui: 'Couture UI', 'Figtree', 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
	/* Ornament: een kegel met gebogen basis, als masker (kleur via background). */
	--tt-cone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='19.6 0 16.9 21.6'%3E%3Cpath d='M36.28 19.9 27.96 0 19.8 19.91a21.44 21.44 0 0 0 16.48 0'/%3E%3C/svg%3E");

	/* Kapitalen in het UI-font (Figtree, ascent+descent 1.2 em). Grootte,
	   spatiëring en regelhoogte in hele pixels (tests/unit/AtelierTypeTest.php):
	   13 px -> 15,6 px inhoud, regel 18 px; 14 px -> 16,8, regel 19 px;
	   12 px -> 14,4, regel 16 px; 11 px -> 13,2, regel 15 px. Zo valt de
	   basislijn op (bijna) een hele pixel en blijven kleine kapitalen scherp. */
	--tt-caps-size: 13px;
	--tt-caps-track: 2px;
	--tt-caps-line: 18px;
	--tt-nav-size: 13px;
	--tt-nav-track: 2px;
	--tt-nav-line: 18px;
	--tt-btn-size: 14px;
	--tt-btn-track: 2px;
	--tt-btn-line: 19px;
	--tt-foot-size: 12px;
	--tt-foot-track: 2px;
	--tt-foot-line: 16px;
	--tt-tiny-size: 11px;
	--tt-tiny-track: 1px;
	--tt-tiny-line: 15px;
	/* Display (Cormorant Garamond 500, kapitalen, 1 px spatiëring): nooit onder
	   24 px, daaronder breken de haarlijnen op 1x-schermen. */
	--tt-display-track: 1px;

	/* De gedeelde tokens van modern op de Couture-waarden. */
	--shop-brand: var(--tt-ink);
	--shop-brand-deep: #000000;
	--shop-brand-tint: var(--tt-gold-tint);
	--shop-brand-text: var(--tt-ink);
	--shop-fg-on-brand: #ffffff;
	--shop-fg-on-brand-deep: #ffffff;
	--shop-accent: var(--tt-gold);
	--shop-fg-on-accent: var(--tt-ink);
	--shop-accent-quiet: var(--tt-gold-tint);
	--shop-fg-1: var(--tt-ink);
	--shop-fg-2: var(--tt-ink-soft);
	--shop-fg-3: var(--tt-ink-mute);
	--shop-bg-1: var(--tt-bg);
	--shop-bg-2: var(--tt-surface);
	--shop-bg-3: var(--tt-surface-deep);
	--shop-border: var(--tt-line);
	--shop-border-strong: var(--tt-line-strong);
	--shop-font-sans: var(--tt-font-ui);
	--shop-font-ui: var(--tt-font-ui);
	--shop-font-display: var(--tt-font-display);
	--shop-r-sm: 0px;
	--shop-r-md: 0px;
	--shop-r-lg: 0px;
	--shop-r-card: 0px;
	--shop-r-pill: 0px;
	--shop-shadow-sm: none;
	--shop-shadow-md: none;
	--shop-shadow-lg: 0 16px 40px rgba(26, 23, 27, 0.1);
	--shop-shadow-brand: none;
	--shop-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--tt-gold);
	--shop-lift: 0px;
	--shop-tracking-tight: 0;
}