/* ============================================================
   shopbase design tokens (thema modern, docs/theme-modern.md)

   Namen volgen de crm-tokens van IceCloud (src/assets/css/crm-tokens.css:
   --brand, --fg-1, --bg-1, --border, --r-md, --shadow-md ...) met het
   voorvoegsel --shop-, zodat ze later naar een gedeeld pakket
   @cloudfactory/tokens kunnen (ook voor de React-storefront).

   Dit bestand bevat de NEUTRALE standaardwaarden. Wat per shop
   verschilt (merkkleuren, font, afronding) zet include/theme.php
   in de <head> als :root-override, uit de branding.*-instellingen.
   Geen hardgecodeerde hex in de themabestanden: alles via var().
   ============================================================ */
:root {
	/* --- merk (per shop overschreven) ------------------------- */
	--shop-brand: #2f6fde;          /* primary: knoppen, accenten */
	--shop-brand-deep: #1f4fa8;     /* hover/pressed, = branding.color_secondary */
	--shop-brand-tint: #9dbcf0;
	--shop-brand-text: #2f6fde;     /* merkkleur als tekst, min. 4.5:1 op wit (AA) */
	--shop-fg-on-brand: #ffffff;    /* primary-contrast: wit of bijna-zwart, berekend */
	--shop-fg-on-brand-deep: #ffffff;
	--shop-accent: #2f6fde;
	--shop-fg-on-accent: #ffffff;
	--shop-accent-quiet: #eaf1fc;   /* zachte merkvlakken (chips, badges) */

	/* --- semantisch, licht ------------------------------------ */
	--shop-fg-1: #14161a;           /* tekst */
	--shop-fg-2: #4a4d55;           /* secundaire tekst (7.9:1 op wit) */
	--shop-fg-3: #6b6f78;           /* muted (5.0:1 op wit, AA) */
	--shop-bg-1: #ffffff;           /* surface */
	--shop-bg-2: #f7f7f8;           /* pagina-achtergrond, secties */
	--shop-bg-3: #efeff1;           /* skeleton, inactieve vlakken */
	--shop-border: #e4e4e7;
	--shop-border-strong: #c9c9cf;
	--shop-pos: #1d7a46;            /* success (5.3:1 op wit) */
	--shop-warn: #a35a00;           /* warn (5.2:1 op wit) */
	--shop-neg: #c0322f;            /* danger (5.2:1 op wit) */
	--shop-pos-quiet: #e7f5ec;
	--shop-warn-quiet: #fdf2e1;
	--shop-neg-quiet: #fdecec;

	/* --- typografie -------------------------------------------- */
	--shop-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--shop-font-display: var(--shop-font-sans);
	--shop-font-ui: var(--shop-font-sans); /* kleine UI-tekst; branding.font_ui */
	--shop-text-xs: 0.8125rem;                               /* 13px */
	--shop-text-sm: 0.875rem;                                /* 14px */
	--shop-text-md: 1rem;                                    /* 16px, body */
	--shop-text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--shop-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--shop-text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--shop-text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	--shop-text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
	--shop-leading-tight: 1.15;
	--shop-leading-snug: 1.35;
	--shop-leading-body: 1.6;
	--shop-weight-regular: 400;
	--shop-weight-medium: 500;
	--shop-weight-semibold: 600;
	--shop-weight-bold: 700;
	--shop-tracking-tight: -0.02em;

	/* --- spacing (4px-raster) ---------------------------------- */
	--shop-space-1: 0.25rem;
	--shop-space-2: 0.5rem;
	--shop-space-3: 0.75rem;
	--shop-space-4: 1rem;
	--shop-space-5: 1.5rem;
	--shop-space-6: 2rem;
	--shop-space-7: 3rem;
	--shop-space-8: 4rem;
	--shop-section-y: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	--shop-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
	--shop-container: 1240px;

	/* --- radii (per shop: branding.radius) --------------------- */
	--shop-r-sm: 8px;
	--shop-r-md: 14px;
	--shop-r-lg: 20px;
	--shop-r-card: 16px;
	--shop-r-pill: 999px;

	/* --- schaduwen --------------------------------------------- */
	--shop-shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06), 0 1px 3px rgba(20, 22, 26, 0.04);
	--shop-shadow-md: 0 4px 14px rgba(20, 22, 26, 0.08), 0 2px 6px rgba(20, 22, 26, 0.04);
	--shop-shadow-lg: 0 18px 40px rgba(20, 22, 26, 0.12), 0 4px 12px rgba(20, 22, 26, 0.06);
	--shop-shadow-brand: 0 10px 24px color-mix(in srgb, var(--shop-brand) 28%, transparent);
	--shop-focus-ring: 0 0 0 3px color-mix(in srgb, var(--shop-brand) 35%, transparent);

	/* --- beweging (prefers-reduced-motion: zie onderaan) ------- */
	--shop-dur-fast: 120ms;
	--shop-dur: 200ms;
	--shop-dur-slow: 320ms;
	--shop-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--shop-lift: -4px;

	/* --- lagen -------------------------------------------------- */
	--shop-z-header: 30;
	--shop-z-drawer: 40;

}

@media (prefers-reduced-motion: reduce) {
	:root {
		--shop-dur-fast: 0ms;
		--shop-dur: 0ms;
		--shop-dur-slow: 0ms;
		--shop-lift: 0px;
	}
}