/*
 * Art and Soul design tokens
 * Bron: Figma "Art and Soul" (GYwE6D08VnFgtLPmArd5Vn), pagina "Sketches v3".
 * Alle zichtbare waarden in het thema komen uit deze variabelen.
 */

:root {
	/* ---------- Kleur (Figma: Art and Soul/03, /06, /08, /10) ---------- */
	--as-color-03: #f29faf; /* roze   */
	--as-color-06: #cced07; /* lime   */
	--as-color-08: #2f094e; /* paars  */
	--as-color-10: #fffcf4; /* crème  */
	--as-color-image-placeholder: #d3d3d3;

	/* Semantisch */
	--as-bg: var(--as-color-10);
	--as-fg: var(--as-color-08);
	--as-accent: var(--as-color-03);
	--as-highlight: var(--as-color-06);
	--as-on-dark: var(--as-color-10);
	--as-on-dark-accent: var(--as-color-03);

	/* ---------- Fluid schaal ----------
	   Figma bevat alleen 1440px. Koppen en sectieruimte schalen lineair
	   tussen 390px (kleinste telefoon) en 1440px (ontwerp); daarbuiten
	   staan ze vast. --as-fluid loopt van 0px (≤390) tot 1px (≥1440);
	   "calc(40px + 48 * var(--as-fluid))" is dus 40px → 88px. */
	--as-fluid: clamp(0px, calc((100vw - 390px) / 1050), 1px);

	/* ---------- Typografie (Figma: AS/88, AS/56, AS/32, AS/24, AS/18) ---------- */
	--as-font: "Matter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--as-weight-regular: 400;
	--as-weight-bold: 700;

	/* home-hero: 88/80 → 40/40 */
	--as-text-display-xl-size: calc(40px + 48 * var(--as-fluid));
	--as-text-display-xl-line: calc(40px + 40 * var(--as-fluid));
	--as-text-display-xl-tracking: calc(-0.8px - 2.2 * var(--as-fluid));

	/* paginatitel: 88/64 → 40/40 */
	--as-text-display-size: calc(40px + 48 * var(--as-fluid));
	--as-text-display-line: calc(40px + 24 * var(--as-fluid));
	--as-text-display-tracking: 0.48px;

	/* 56/56 → 32/36 */
	--as-text-h2-size: calc(32px + 24 * var(--as-fluid));
	--as-text-h2-line: calc(36px + 20 * var(--as-fluid));

	/* 32/36 → 24/28 */
	--as-text-h3-size: calc(24px + 8 * var(--as-fluid));
	--as-text-h3-line: calc(28px + 8 * var(--as-fluid));

	/* eyebrow / datum / formulierlabel: 24/24 → 20/22 */
	--as-text-label-size: calc(20px + 4 * var(--as-fluid));
	--as-text-label-line: calc(22px + 2 * var(--as-fluid));
	--as-text-label-tracking: 0.48px;

	--as-text-body-size: 18px;
	--as-text-body-line: 25.6px;
	--as-text-body-bold-line: 23.616px;

	--as-text-nav-size: 16px;
	--as-text-nav-line: 19.2px;

	--as-text-small-size: 16px;           /* footer tekst */
	--as-text-small-line: 24px;
	--as-text-small-tracking: -0.24px;

	--as-text-footer-heading-size: 20px;
	--as-text-footer-heading-line: 20px;
	--as-text-footer-heading-tracking: 0.4px;

	--as-text-button-size: 16px;          /* footerknop */
	--as-text-button-line: 20px;
	--as-text-button-tracking: 0.53px;

	--as-text-legal-tracking: -0.44px;    /* footer onderbalk */

	/* ---------- Spacing ---------- */
	--as-space-1: 4px;
	--as-space-2: 8px;
	--as-space-3: 12px;
	--as-space-4: 16px;
	--as-space-5: 24px;
	--as-space-6: 32px;
	--as-space-7: 40px;
	--as-space-8: 64px;
	--as-space-9: 80px;

	--as-gutter: calc(20px + 8 * var(--as-fluid));       /* paginamarge 28 → 20 */
	--as-container: 1440px;
	--as-section-y: calc(48px + 32 * var(--as-fluid));   /* sectieruimte 80 → 48 */
	--as-footer-gap: calc(64px + 36 * var(--as-fluid));  /* laatste sectie → footer 100 → 64 */
	--as-grid-gap-x: 29px;                /* 3-koloms grid, 442px kolommen */
	--as-grid-gap-y: var(--as-space-7);

	/* ---------- Radius (Figma: Corner-radious) ---------- */
	--as-radius: 20px;
	--as-radius-field: 15px;
	--as-radius-small: 4px;
	--as-radius-none: 0;

	/* ---------- Onderdelen ---------- */
	--as-nav-logo-w: 91px;
	--as-nav-logo-h: 94px;
	--as-nav-item-gap: 71px;
	--as-nav-icon-gap: 48px;
	--as-nav-padding-y: 16px;

	--as-footer-logo-w: 142px;
	--as-footer-logo-h: 147px;
	--as-footer-bar-h: 106px;

	--as-card-image-h: 240px;
	--as-card-w: 442px;
	--as-row-image-w: 441px;
	--as-row-image-h: 266px;
	--as-hero-image-w: 694px;
	--as-hero-image-h: 500px;
	--as-slider-arrow: 40px;
	--as-button-w: 146px;
	--as-field-h: 46px;
	/* Invulvelden: witte variant (Figma 69:1916): wit, 1px paarse rand, radius 15. */
	--as-field-bg: #ffffff;
	--as-field-border: var(--as-fg);
	--as-social-dot: 22px;

	/* ---------- Beweging ---------- */
	--as-transition: 0.2s ease;
}