/* ========================================== DESIGN TOKENS (CSS Custom Properties) ========================================== */ :root { /* Brand gradients */ --grad-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --grad-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); --grad-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); --grad-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --grad-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --grad-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --grad-teal: linear-gradient(135deg, #10b981 0%, #059669 100%); /* Base colors */ --clr-primary: #667eea; --clr-primary-dark: #764ba2; --clr-success: #11998e; --clr-success-light: #38ef7d; --clr-danger: #eb3349; --clr-danger-light: #f45c43; --clr-warning: #f59e0b; --clr-warning-dark: #d97706; --clr-info: #4facfe; --clr-info-light: #00f2fe; /* Neutral scale */ --clr-gray-50: #f9fafb; --clr-gray-100: #f3f4f6; --clr-gray-200: #e5e7eb; --clr-gray-300: #d1d5db; --clr-gray-400: #9ca3af; --clr-gray-500: #6b7280; --clr-gray-600: #4b5563; --clr-gray-700: #374151; --clr-gray-800: #1f2937; /* Shadows */ --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-card-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.15); /* Border radius */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 50px; } /* ========================================== SURFACE TOKENS (dark-mode aware) ========================================== */ :root { --clr-surface: #ffffff; --clr-surface-alt: var(--clr-gray-50); --clr-surface-sub: var(--clr-gray-100); --clr-border: var(--clr-gray-200); --clr-text: var(--clr-gray-800); --clr-text-sec: var(--clr-gray-700); --clr-text-muted: var(--clr-gray-500); --clr-bg: var(--clr-gray-50); /* Semantic durum light arka planlar */ --clr-bg-danger-soft: #fee2e2; --clr-bg-warning-soft: #fef3c7; --clr-bg-success-soft: #f0fdf4; --clr-bg-info-soft: #eff6ff; --clr-bg-primary-soft: #ede9fe; --clr-txt-danger-soft: #dc2626; --clr-txt-warning-soft: #d97706; --clr-txt-success-soft: #059669; --clr-txt-info-soft: #2563eb; --clr-txt-primary-soft: #6d28d9; } /* ========================================== DARK MODE OVERRIDES Apply via: ========================================== */ [data-theme="dark"] { /* Gray scale inverted */ --clr-gray-50: #0f172a; --clr-gray-100: #1e293b; --clr-gray-200: #334155; --clr-gray-300: #475569; --clr-gray-400: #64748b; --clr-gray-500: #94a3b8; --clr-gray-600: #cbd5e1; --clr-gray-700: #e2e8f0; --clr-gray-800: #f1f5f9; /* Surface tokens */ --clr-surface: #1e293b; --clr-surface-alt: #0f172a; --clr-surface-sub: #263548; --clr-border: #334155; --clr-text: #f1f5f9; --clr-text-sec: #cbd5e1; --clr-text-muted: #94a3b8; --clr-bg: #0f172a; /* Brand renkleri dark'ta biraz daha parlak */ --clr-primary: #818cf8; --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.5); /* Semantic durum soft renkleri dark'ta yarı saydam */ --clr-bg-danger-soft: rgba(220, 38, 38, 0.18); --clr-bg-warning-soft: rgba(245, 158, 11, 0.18); --clr-bg-success-soft: rgba(16, 185, 129, 0.18); --clr-bg-info-soft: rgba(59, 130, 246, 0.18); --clr-bg-primary-soft: rgba(99, 102, 241, 0.18); --clr-txt-danger-soft: #f87171; --clr-txt-warning-soft: #fbbf24; --clr-txt-success-soft: #34d399; --clr-txt-info-soft: #60a5fa; --clr-txt-primary-soft: #a78bfa; } /* Sistem dark tercihine otomatik uy (toggle yoksa) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --clr-gray-50: #0f172a; --clr-gray-100: #1e293b; --clr-gray-200: #334155; --clr-gray-300: #475569; --clr-gray-400: #64748b; --clr-gray-500: #94a3b8; --clr-gray-600: #cbd5e1; --clr-gray-700: #e2e8f0; --clr-gray-800: #f1f5f9; --clr-surface: #1e293b; --clr-surface-alt: #0f172a; --clr-surface-sub: #263548; --clr-border: #334155; --clr-text: #f1f5f9; --clr-text-sec: #cbd5e1; --clr-text-muted: #94a3b8; --clr-bg: #0f172a; --clr-primary: #818cf8; --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.5); --clr-bg-danger-soft: rgba(220, 38, 38, 0.18); --clr-bg-warning-soft: rgba(245, 158, 11, 0.18); --clr-bg-success-soft: rgba(16, 185, 129, 0.18); --clr-bg-info-soft: rgba(59, 130, 246, 0.18); --clr-bg-primary-soft: rgba(99, 102, 241, 0.18); --clr-txt-danger-soft: #f87171; --clr-txt-warning-soft: #fbbf24; --clr-txt-success-soft: #34d399; --clr-txt-info-soft: #60a5fa; --clr-txt-primary-soft: #a78bfa; } }