/**
 * Tasarım değişkenleri. Diğer tüm dosyalar renk, yazı, boşluk, köşe ve gölgeyi buradan alır.
 */
:root {
	/* Marka */
	--ufb-navy: #00022d;
	--ufb-navy-2: #0a1f44;
	--ufb-navy-3: #0b1747;
	--ufb-yellow: #f5c518;
	--ufb-yellow-dark: #ddb000;
	--ufb-yellow-soft: #fff8d9;

	/* Yüzey ve metin */
	--ufb-surface: #f6f7fa;
	--ufb-card: #fff;
	--ufb-text: #2a3147;
	--ufb-head: #0a1233;
	--ufb-muted: #5b6478;
	--ufb-on-dark: #fff;
	--ufb-on-dark-muted: #c6d1e0;
	--ufb-line: #e3e6ee;
	--ufb-line-strong: #c8cdda;

	/* Durum */
	--ufb-error: #b3261e;
	--ufb-success: #1b7a43;
	--ufb-warning: #8a6d00;
	--ufb-neutral: #5b6478;

	/* Yazı tipleri */
	--ufb-font: "Barlow", "Cabin", sans-serif;
	--ufb-font-ui: "Barlow Semi Condensed", "Cabin", sans-serif;
	--ufb-font-display: "Barlow Condensed", "Alegreya Sans", sans-serif;

	/* Yazı ölçeği */
	--ufb-fs-xs: 12px;
	--ufb-fs-sm: 14px;
	--ufb-fs-md: 16px;
	--ufb-fs-lg: 18px;
	--ufb-fs-xl: clamp(20px, 1vw + 15px, 24px);
	--ufb-fs-2xl: clamp(28px, 1.8vw + 18px, 38px);
	--ufb-fs-3xl: clamp(32px, 3vw + 20px, 52px);
	--ufb-fs-hero: clamp(42px, 5.6vw, 76px);
	--ufb-lh-tight: 1.1;
	--ufb-lh-body: 1.65;

	/* Boşluk ölçeği */
	--ufb-space-1: 4px;
	--ufb-space-2: 8px;
	--ufb-space-3: 12px;
	--ufb-space-4: 16px;
	--ufb-space-5: 24px;
	--ufb-space-6: 32px;
	--ufb-space-7: 48px;
	--ufb-space-8: 64px;
	--ufb-gap: clamp(16px, 2vw, 24px);
	--ufb-section: clamp(40px, 5vw, 64px);

	/* Köşe, gölge, katman */
	--ufb-radius-sm: 6px;
	--ufb-radius: 10px;
	--ufb-radius-pill: 999px;
	--ufb-shadow-sm: 0 1px 2px rgba(16, 32, 72, .06);
	--ufb-shadow-md: 0 10px 24px rgba(16, 32, 72, .12);
	--ufb-shadow-nav: 0 2px 12px rgba(0, 2, 45, .22);
	--ufb-z-raised: 2;

	/* Etkileşim */
	--ufb-focus: 3px solid var(--ufb-navy);
	--ufb-focus-on-dark: 3px solid var(--ufb-yellow);
	--ufb-ease: .15s ease;

	/* Desen */
	--ufb-stripes: repeating-linear-gradient(112deg, var(--ufb-navy) 0 28px, var(--ufb-navy-3) 28px 56px);
}