/*
 * vn-foundation Tokens — semantische Foundation-Schicht
 *
 * Section-Templates referenzieren AUSSCHLIESSLICH diese Tokens.
 * NIE direkt --sage-*, --paper, --newsreader etc. in Section-CSS verwenden.
 *
 * Pro Kunde wird der MAPPING-Layer in der STYLE-GUIDE bzw. im Child-Theme gesetzt:
 *   :root {
 *     --vn-color-accent: var(--sage-300);
 *     --vn-color-surface-dark: var(--sage-800);
 *     ...
 *   }
 *
 * Diese Datei enthält neutrale Defaults — wenn das Child-Theme keinen Mapping setzt,
 * rendert die Section in einem grau-cream Default-Brand (kein Sage, kein Strutz).
 *
 * Naming-Convention:
 *   --vn-color-<role>     Semantische Farb-Rolle
 *   --vn-font-<role>      Font-Familie
 *   --vn-space-<size>     Spacing-Stufe
 *   --vn-container-<size> Container-Breite
 */

:root {
	/* ── COLOR ──────────────────────────────────────────────────── */

	/* Primary surfaces */
	--vn-color-paper:           #F5F4EE;
	--vn-color-paper-strong:    #FAF9F4;
	--vn-color-surface-light:   #EEEDE6;
	--vn-color-surface-mid:     #E0DED4;

	--vn-color-surface-dark:    #2A2A2A;
	--vn-color-surface-darker:  #1A1A1A;

	--vn-color-surface-raised:  #3A3A3A;

	/* Text on light backgrounds */
	--vn-color-ink:             #1A1A1A;
	--vn-color-ink-muted:       #555555;
	--vn-color-ink-subtle:      #888888;

	/* Text on dark backgrounds */
	--vn-color-on-dark-strong:  var(--vn-color-paper-strong);
	--vn-color-on-dark:         var(--vn-color-paper);
	--vn-color-on-dark-muted:   color-mix(in srgb, var(--vn-color-paper) 60%, transparent);

	/* Dividers */
	--vn-color-divider-light:   color-mix(in srgb, var(--vn-color-ink) 10%, transparent);
	--vn-color-divider-dark:    color-mix(in srgb, var(--vn-color-paper) 18%, transparent);

	/* Accent (Brand) — der EINE Akzent-Slot. Pro Kunde überschrieben */
	--vn-color-accent:          #8A8F70;
	--vn-color-accent-strong:   #6F754A;
	--vn-color-accent-soft:     color-mix(in srgb, var(--vn-color-accent) 40%, transparent);

	/* Status (optional, selten genutzt) */
	--vn-color-positive:        #4A7C59;
	--vn-color-warning:          #C8821D;
	--vn-color-negative:         #B33A3A;

	/* ── TYPOGRAPHY ─────────────────────────────────────────────── */

	/* Foundation defaults — System-Stack. Pro Kunde mit Custom-Family überschrieben. */
	--vn-font-display:   ui-serif, Georgia, "Times New Roman", serif;
	--vn-font-body:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--vn-font-mono:      ui-monospace, "SF Mono", Menlo, monospace;

	/* Type-scale (clamp-based, fluid) */
	--vn-text-xs:    clamp(0.7rem, 0.65rem + 0.25vw, 0.78rem);
	--vn-text-sm:    clamp(0.85rem, 0.8rem + 0.3vw, 0.95rem);
	--vn-text-base:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	--vn-text-lg:    clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
	--vn-text-xl:    clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--vn-text-2xl:   clamp(2rem, 1.6rem + 2vw, 3rem);
	--vn-text-display: clamp(2.5rem, 2rem + 3vw, 5.25rem);
	--vn-text-hero:    clamp(2.75rem, 2rem + 5vw, 9rem);

	/* ── SPACE ──────────────────────────────────────────────────── */

	--vn-space-xs:   0.25rem;
	--vn-space-sm:   0.5rem;
	--vn-space-md:   1rem;
	--vn-space-lg:   1.5rem;
	--vn-space-xl:   clamp(2rem, 3vw, 3rem);
	--vn-space-2xl:  clamp(3rem, 5vw, 5rem);
	--vn-space-3xl:  clamp(4rem, 8vw, 8rem);

	/* Section-Padding */
	--vn-section-y:  clamp(6rem, 12vw, 10rem);

	/* ── LAYOUT ─────────────────────────────────────────────────── */

	--vn-container-narrow:   56rem;
	--vn-container-default:  108rem;
	--vn-container-wide:     120rem;

	--vn-gutter:             clamp(1.25rem, 4vw, 4rem);

	--vn-radius-sm:          4px;
	--vn-radius-md:          6px;
	--vn-radius-lg:          12px;
	--vn-radius-full:        9999px;

	/* ── MOTION ─────────────────────────────────────────────────── */

	--vn-ease-out:           cubic-bezier(0.22, 1, 0.36, 1);
	--vn-ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);

	--vn-d-snap:             0.18s;
	--vn-d-medium:           0.35s;
	--vn-d-slow:             0.7s;
}

/* ── REDUCE-MOTION ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	:root {
		--vn-d-snap: 0s;
		--vn-d-medium: 0s;
		--vn-d-slow: 0s;
	}
}