/* ═══════════════════════════════════════════════════════════════ VUZA — Tasarım belirteçleri Renk, tipografi, boşluk ve yükseklik ölçekleri. Bileşenler ham değer kullanmaz; yalnızca bu değişkenlere başvurur. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Yüzeyler (koyu tema temel alınmıştır) ── */ --surface-base: #0a0a0f; --surface-raised: #12121a; --surface-overlay: #1a1a24; --surface-sunken: #06060a; --surface-hover: #1f1f2b; --surface-active: #262633; /* ── Kenarlıklar ── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); /* ── Metin ── */ --text-primary: #f4f4f7; --text-secondary: #a1a1b5; --text-tertiary: #6b6b80; --text-inverse: #0a0a0f; /* ── Marka ── Mor→pembe geçişi ürünün kimliği; vurgu öğelerinde kullanılır. */ --brand-50: #f3f0ff; --brand-300: #b39dff; --brand-400: #9575ff; --brand-500: #7c4dff; --brand-600: #6b2fef; --brand-700: #5722c9; --accent-500: #ec4899; --accent-600: #db2777; --brand-gradient: linear-gradient(135deg, var(--brand-500) 0%, var(--accent-500) 100%); --brand-glow: 0 0 40px rgba(124, 77, 255, 0.28); /* ── Durum renkleri ── */ --success-500: #22c55e; --success-bg: rgba(34, 197, 94, 0.12); --warning-500: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --danger-500: #ef4444; /* Metin için ayrı bir kırmızı. --danger-500 ikon ve kenarlıkta iyi ama gövde metni olarak açık zeminde 3.76:1 kalıyor — küçük metin için WCAG AA eşiği 4.5. Koyu zeminde parlak ton doğru, açık zeminde koyu ton; bu yüzden temaya göre ayrı tanımlı. */ --danger-text: #fca5a5; --danger-bg: rgba(239, 68, 68, 0.12); --info-500: #38bdf8; --info-bg: rgba(56, 189, 248, 0.12); /* ── Tipografi ── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace; --text-2xs: 0.6875rem; /* 11px — etiketler */ --text-xs: 0.75rem; /* 12px — yardımcı metin */ --text-sm: 0.8125rem; /* 13px — ikincil */ --text-base: 0.875rem; /* 14px — gövde */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --leading-tight: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-wide: 0.02em; --tracking-widest: 0.08em; /* ── Boşluk (4px temelli) ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ── Köşe yuvarlaklığı ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* ── Gölgeler ── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55); /* ── Hareket ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 400ms; /* ── Yerleşim ── */ --sidebar-width: 248px; --sidebar-width-collapsed: 68px; --topbar-height: 60px; --content-max-width: 1440px; /* ── Katman sırası ── */ --z-sticky: 100; --z-sidebar: 200; --z-dropdown: 300; --z-modal: 400; --z-toast: 500; } /* ═══ Açık tema ═══ Kullanıcı tercihi ile uygulanır. */ :root[data-theme="light"] { --surface-base: #fafafc; --surface-raised: #ffffff; --surface-overlay: #ffffff; --surface-sunken: #f1f1f5; --surface-hover: #f4f4f8; --surface-active: #eaeaf2; --border-subtle: rgba(10, 10, 15, 0.06); --border-default: rgba(10, 10, 15, 0.11); --border-strong: rgba(10, 10, 15, 0.20); --text-primary: #12121a; --text-secondary: #55556b; --text-tertiary: #8a8aa0; --text-inverse: #ffffff; --danger-text: #b42318; --brand-glow: 0 0 40px rgba(124, 77, 255, 0.16); --shadow-sm: 0 1px 2px rgba(10, 10, 15, 0.06); --shadow-md: 0 4px 12px rgba(10, 10, 15, 0.08); --shadow-lg: 0 12px 32px rgba(10, 10, 15, 0.12); --shadow-xl: 0 24px 64px rgba(10, 10, 15, 0.16); } /* Hareketi azalt tercihini onurlandır. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }