/* ============================================================================= Koop Tasarım Sistemi — Token Katmanı (PR-1) ============================================================================= Tek source of truth. Tüm renk/spacing/radius/typography/shadow buradan. Bu dosya style.css ve sofor.css'ten ÖNCE yüklenir; sonraki dosyalar var() ile bu değerleri kullanır. Kapsam: - Light mode → :root (default) - Dark mode → [data-theme="dark"] (manuel toggle) - OS dark → @media (prefers-color-scheme: dark) (auto, manuel yoksa) FOUC önleme: HTML 'inde inline script `` set eder (DOM render'dan önce), bu yüzden açılışta beyaz flash olmaz. ============================================================================= */ :root { /* ===== BRAND & STATUS RENKLER (light) ===== */ --color-primary: #c62828; --color-primary-hover: #b71c1c; --color-primary-active: #8e1f1f; --color-primary-soft: rgba(198, 40, 40, 0.10); --color-primary-on: #ffffff; /* primary üstüne yazılan metin */ --color-success: #2e7d32; --color-success-hover: #1b5e20; --color-success-soft: rgba(46, 125, 50, 0.10); --color-success-on: #ffffff; --color-warning: #ed6c02; /* turuncu — tek ton (4 varyasyon birleşti) */ --color-warning-hover: #c65300; --color-warning-soft: rgba(237, 108, 2, 0.10); --color-warning-on: #ffffff; --color-danger: #d32f2f; /* daha açık kırmızı — uyarı/hata */ --color-danger-hover: #b71c1c; --color-danger-soft: rgba(211, 47, 47, 0.10); --color-danger-on: #ffffff; --color-info: #1565c0; /* mavi — tek ton (4 varyasyon birleşti) */ --color-info-hover: #0d47a1; --color-info-soft: rgba(21, 101, 192, 0.10); --color-info-on: #ffffff; /* ===== NÖTR (light) ===== */ --color-bg: #ffffff; /* sayfa arkaplanı */ --color-bg-elevated: #ffffff; /* kart, modal, popup */ --color-bg-subtle: #f8f9fa; /* sidebar, card-header, hafif vurgu */ --color-bg-muted: #f1f3f5; /* badge bg, disabled, divider zone */ --color-bg-overlay: rgba(0, 0, 0, 0.50); /* modal overlay */ --color-border: #e9ecef; /* default border */ --color-border-strong: #ced4da; /* input border */ --color-divider: #f1f3f5; /* hr, table row */ --color-text: #212529; /* ana metin */ --color-text-secondary: #495057; /* başlık altı / label */ --color-text-muted: #6c757d; /* yardımcı metin (eski #888) */ --color-text-disabled: #adb5bd; --color-text-inverse: #ffffff; /* Focus ring — keyboard accessibility (WCAG 2.1) */ --color-focus: #1565c0; --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus); /* Sidebar — koyu sidebar pattern (light mode'da bile koyu, modern dashboard) */ --color-sidebar-bg: #1f2129; /* eski #1a1a1a saf siyahdı; biraz mavi-gri */ --color-sidebar-text: #dfe3e8; /* eski #fff saf beyazdı; %88 yumuşatıldı */ /* ===== TYPOGRAPHY ===== */ --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 24px; --font-size-2xl: 32px; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ===== SPACING (4'ün katları, "magic number" yok) ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ===== RADIUS ===== */ --radius-sm: 6px; /* input, küçük buton, badge */ --radius-md: 10px; /* kart, modal, list item */ --radius-lg: 16px; /* büyük kart, sheet */ --radius-pill: 9999px; /* tag, chip, pill */ --radius-circle: 50%; /* ===== SHADOW ===== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18); /* ===== MOTION ===== */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ===== Z-INDEX KATMANLARI ===== */ --z-dropdown: 50; --z-sticky: 100; --z-fixed: 200; --z-overlay: 900; --z-modal: 1000; --z-popover: 1100; --z-toast: 1200; --z-tooltip: 1300; /* ===== LAYOUT ===== */ --touch-target-min: 44px; /* mobilde minimum dokunma alanı (Apple/MD3) */ --container-max: 1200px; /* ===== BREAKPOINT (referans, @media için) ===== */ /* sm: 480px (büyük telefon) md: 768px (tablet) lg: 1024px (laptop) xl: 1280px (desktop) */ } /* ============================================================================= DARK MODE ============================================================================= */ [data-theme="dark"] { /* Brand: dark mode için matt/dust tonlar — light'taki cırtlak kırmızı sakinleştirildi */ --color-primary: #d96565; --color-primary-hover: #e57878; --color-primary-active: #c25555; --color-primary-soft: rgba(217, 101, 101, 0.15); --color-primary-on: #ffffff; --color-success: #66bb6a; --color-success-hover: #81c784; --color-success-soft: rgba(102, 187, 106, 0.15); --color-success-on: #0a1612; --color-warning: #ffa726; --color-warning-hover: #ffb74d; --color-warning-soft: rgba(255, 167, 38, 0.15); --color-warning-on: #1a1100; --color-danger: #ef5350; --color-danger-hover: #e57373; --color-danger-soft: rgba(239, 83, 80, 0.15); --color-danger-on: #ffffff; --color-info: #42a5f5; --color-info-hover: #64b5f6; --color-info-soft: rgba(66, 165, 245, 0.15); --color-info-on: #001220; /* Nötr — koyu tonlar (modern dark, pure black değil; subtle/muted siyahsılığı azaltıldı) */ --color-bg: #161a21; /* sayfa arkaplanı (eski #0f1115 çok siyahdı) */ --color-bg-elevated: #1f242c; /* kart, modal */ --color-bg-subtle: #262c36; /* pasif satır, sidebar, hafif vurgu */ --color-bg-muted: #303843; /* badge bg, hover */ --color-bg-overlay: rgba(0, 0, 0, 0.70); --color-border: #2a3038; --color-border-strong: #3a414b; --color-divider: #2a3038; --color-text: #e9ecef; --color-text-secondary: #adb5bd; --color-text-muted: #868e96; --color-text-disabled: #495057; --color-text-inverse: #0f1115; --color-focus: #42a5f5; --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus); --color-sidebar-bg: #1a1d23; /* dark mode'da body'den (#161a21) biraz açık ayrım */ --color-sidebar-text: #cdd5dd; /* daha yumuşak, %80 brightness */ /* Shadow — dark'ta daha güçlü çünkü kontrast düşük */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.70); } /* Not: OS prefers-color-scheme fallback KULLANILMAZ — default her zaman light. Kullanıcı tema toggle ile dark seçerse [data-theme="dark"] üstündeki rule'lar uygulanır, localStorage'da kalıcıdır. Bu kararlı UX (proje sahibi tercihi). */ /* ============================================================================= GLOBAL DAVRANIŞ (mobile-first, minimum invaziv — mevcut style.css'i bozmaz) ============================================================================= */ /* Smooth theme transition — toggle anında ani flash olmaz */ html { color-scheme: light dark; -webkit-text-size-adjust: 100%; } [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* Body bg/text — mevcut style.css `body { background:#f0f2f5 }` override eder, biz token vermek için light'a uyumlu kalıyoruz; PR-2'de style.css'i token'a çekeceğiz */ /* Reduced motion — hareket azaltma tercihi */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }