/*
 * Design tokens , DESIGN.md'den türetildi.
 * Airbnb-esinli light palet + Inter tipografisi.
 */

:root {
	/* --- Renk: marka --- */
	--color-brand: #ff385c;           /* Rausch Red */
	--color-brand-deep: #e00b41;      /* Deep Rausch (hover/pressed) */
	--color-brand-error: #c13515;
	--color-brand-error-hover: #b32505;
	--color-luxe: #460479;            /* Premium tier 1 (ileride) */
	--color-plus: #92174d;            /* Premium tier 2 (ileride) */

	/* --- Renk: metin --- */
	--color-text: #222222;            /* Near-black, warm */
	--color-text-focused: #3f3f3f;
	--color-text-secondary: #6a6a6a;
	--color-text-disabled: rgba(0, 0, 0, 0.24);
	--color-text-link-disabled: #929292;
	--color-text-legal: #428bff;

	/* --- Renk: yüzey --- */
	--color-bg: #ffffff;
	--color-surface-soft: #f2f2f2;
	--color-surface-muted: #fafafa;
	--color-border: rgba(0, 0, 0, 0.12);
	--color-border-strong: #c1c1c1;

	/* --- Gölgeler --- */
	--shadow-card:
		rgba(0, 0, 0, 0.02) 0 0 0 1px,
		rgba(0, 0, 0, 0.04) 0 2px 6px,
		rgba(0, 0, 0, 0.1) 0 4px 8px;
	--shadow-hover: rgba(0, 0, 0, 0.08) 0 4px 12px;
	--shadow-active-ring: rgb(255, 255, 255) 0 0 0 4px;

	/* --- Tipografi --- */
	--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-display: 'Plus Jakarta Sans', 'Arial Black', Impact, sans-serif;

	/* Type scale , DESIGN.md'den */
	--fs-section:  1.75rem;   /* 28px */
	--fs-card-lg:  1.375rem;  /* 22px */
	--fs-sub:      1.3125rem; /* 21px */
	--fs-feature:  1.25rem;   /* 20px */
	--fs-ui:       1rem;      /* 16px */
	--fs-body:     0.875rem;  /* 14px */
	--fs-small:    0.8125rem; /* 13px */
	--fs-tag:      0.75rem;   /* 12px */
	--fs-badge:    0.6875rem; /* 11px */
	--fs-micro:    0.5rem;    /* 8px */

	--fw-400: 400;
	--fw-500: 500;
	--fw-600: 600;
	--fw-700: 700;

	--lh-tight:   1.18;
	--lh-snug:    1.25;
	--lh-normal:  1.43;

	--track-tight: -0.44px;
	--track-soft:  -0.18px;
	--track-micro: 0.32px;

	/* --- Radius skala --- */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 32px;
	--radius-full: 9999px;
	--radius-circle: 50%;

	/* --- Spacing (8px base) --- */
	--space-0: 0;
	--space-1: 1px;
	--space-2: 2px;
	--space-3: 4px;
	--space-4: 6px;
	--space-5: 8px;
	--space-6: 11px;
	--space-7: 12px;
	--space-8: 16px;
	--space-9: 24px;
	--space-10: 32px;
	--space-11: 48px;
	--space-12: 60px;
	--space-14: 80px;
	--space-16: 100px;

	/* --- Container --- */
	--container-max: 1200px;
	--container-pad: 24px;

	/* --- Geçişler --- */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--ease-out-brand: cubic-bezier(0.22, 1, 0.36, 1); /* Framer-benzeri yumuşak ease-out */
	--dur-fast: 120ms;
	--dur: 200ms;
	--dur-slow: 320ms;
	--dur-reveal: 700ms;
	--dur-marquee: 50s;

	/* --- Z-index --- */
	--z-header: 50;
	--z-overlay: 100;
	--z-modal: 200;
}