/**
 * MILIMEV DESIGN TOKENS
 * Sitedeki tüm renk, tipografi, boşluk, radius ve gölge değerleri buradan gelir.
 * Bileşenlerde sabit px/renk yazılmaz; her zaman var(--token) kullanılır.
 * Yön: premium, mimari, minimal, teknik, sıcak, güvenilir.
 */

:root {
	/* COLORS */
	--color-background: #f6f4f0;
	--color-surface: #ffffff;
	--color-surface-alt: #eeebe5;
	--color-text: #1c1b19;
	--color-text-muted: #625d55;
	--color-border: #e0dbd2;
	--color-border-strong: #8c8579; /* input/checkbox kenarı, 3:1 üstü */
	--color-brand: #2e3a34;
	--color-brand-hover: #1c2520;
	--color-brand-contrast: #ffffff;
	--color-accent: #8a5a30;
	--color-sale: #a3392b;
	--color-success: #2b6340;
	--color-warning: #85560b;
	--color-error: #a3392b;
	--color-focus: #1f5fbf;

	/* TYPOGRAPHY (self-hosted WOFF2 eklenince --font-primary güncellenecek) */
	/* Instrument Sans + IBM Plex Mono: WOFF2 dosyaları assets/fonts'a eklenince @font-face ile yüklenecek */
	--font-primary: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-secondary: var(--font-primary);
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	/* FONT SIZES (akışkan, 390px -> 1440px) */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	--text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
	--text-display: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);

	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-normal: 1.6;
	--tracking-tight: -0.015em;
	--tracking-wide: 0.08em;

	/* SPACING (4px taban) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	/* LAYOUT */
	--container: 1280px;
	--container-wide: 1440px;
	--content-width: 720px;
	--gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);

	/* MOBILE / TOUCH (trafik %90 mobil) */
	--touch-min: 44px;
	--control-h: 48px;
	--cta-h: 52px;
	--header-h: 56px;

	/* RADIUS (bilinçli olarak küçük) */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-pill: 999px;

	/* SHADOW (az ve yumuşak) */
	--shadow-sm: 0 1px 2px rgb(28 27 25 / 0.06);
	--shadow-md: 0 4px 16px rgb(28 27 25 / 0.08);
	--shadow-bar: 0 -1px 0 #e0dbd2, 0 -8px 24px rgb(28 27 25 / 0.06);
	--shadow-sheet: 0 -12px 40px rgb(28 27 25 / 0.16);

	/* MOTION */
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--ease: cubic-bezier(0.2, 0, 0, 1);

	/* Z-INDEX */
	--z-header: 100;
	--z-drawer: 200;
	--z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
	}
}