/** * tokens.css — RiskAsistan Suite v5.4 * Design token sistemi. Tüm CSS değişkenleri tek kaynak (SSOT). * Hiçbir component dosyası sabit renk/boyut kullanmaz. * * ⚠️ Bu dosya dışında :root'ta token tanımlamayın. * suite_main.css, nav-rail.css vb. sadece var() ile tüketir. */ :root { /* ── COLOR PALETTE ──────────────────────────────────────── */ --midnight: #0a0e1a; --navy: #111827; --navy-light: #1a2332; --copper: #c87533; --copper-light: #e8a96a; --copper-rgb: 200, 117, 51; --copper-glow: rgba(200, 117, 51, 0.15); --rose-gold: #b76e79; --teal-accent: #2dd4bf; --warm-white: #f5f0eb; --warm-gray: #9ca3af; --warm-black: #0a0a14; --orange-accent: #ff8c00; --surface-1: #0d1117; --surface-2: #161b22; --surface-3: #1c2128; /* Semantic */ --color-primary: var(--copper); --color-surface-1: var(--surface-1); --color-surface-2: var(--surface-2); --color-surface-3: var(--surface-3); --color-border: rgba(255,255,255,0.06); --color-border-strong: rgba(200,117,51,0.3); --color-text-1: var(--warm-white); --color-text-2: var(--warm-gray); --color-text-3: rgba(255,255,255,0.35); /* Status */ --green: #22c55e; --red: #ef4444; --yellow: #f59e0b; --blue: #3b82f6; --purple: #a855f7; /* ── TYPOGRAPHY ──────────────────────────────────────────── */ --font-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif; --font-serif: 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 24px; /* ── SPACING (4px grid) ──────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── BORDER RADIUS ───────────────────────────────────────── */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; /* ── Z-INDEX LAYERS (ascending — no gaps, no collisions) ── */ --z-base: 1; --z-above: 10; --z-panel: 100; --z-nav: 120; --z-hud: 200; --z-modal: 1000; --z-toast: 9000; --z-top: 9999; --z-portal: 9500; --z-cmd-palette: 10000; --z-footer-intercept: 10001; /* cyberpunk toast — cmd-palette'in hemen üstü */ --z-holo: 99998; /* voice-hologram — warp'ın altında */ --z-warp: 99999; /* warp canvas — en üst katman */ --z-auth-base: var(--z-above); --z-auth-overlay: var(--z-modal); --z-auth-modal: 1010; --z-auth-theme-btn: var(--z-top); /* ── TRANSITIONS ─────────────────────────────────────────── */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* ── SHADOWS ─────────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 8px 48px rgba(0,0,0,0.5); --shadow-glow: 0 0 40px rgba(200,117,51,0.15); /* Premium card shadows — Vercel/Linear multi-layer depth */ --shadow-card: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.2), 0 4px 24px -2px rgba(0,0,0,0.35); --shadow-card-hover: 0 0 0 1px rgba(var(--copper-rgb),0.15), 0 4px 8px rgba(0,0,0,0.2), 0 8px 40px -4px rgba(0,0,0,0.45), 0 0 60px -10px rgba(var(--copper-rgb),0.08); --shadow-card-glass: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 16px rgba(0,0,0,0.25), 0 8px 48px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04); --shadow-card-glass-hover: 0 0 0 1px rgba(var(--copper-rgb),0.12), 0 8px 24px rgba(0,0,0,0.3), 0 16px 64px -8px rgba(0,0,0,0.5), 0 0 80px -20px rgba(var(--copper-rgb),0.1), inset 0 1px 0 rgba(255,255,255,0.06); /* Spring easing with overshoot — bouncy card hover */ --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── BLUR ────────────────────────────────────────────────── */ --blur-sm: blur(8px); --blur-md: blur(16px); --blur-lg: blur(24px); /* ── BREAKPOINTS (reference — CSS @media can't use vars) ── */ /* --bp-phone: 480px; */ /* --bp-tablet: 768px; */ /* --bp-laptop: 1024px; */ /* --bp-desktop: 1280px; */ /* --bp-wide: 1920px; */ /* --bp-ultra: 2560px; */ } /* ═══════════════════════════════════════════════════════════ LIGHT THEME — Özgün Palet (SSOT) data-theme="light" üzerinde set edilir (fx.js). Tüm var() tüketicileri otomatik olarak güncellenir. ═══════════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── LIGHT BASE COLORS ───────────────────────────────── */ --midnight: #faf8f5; --navy: #f5f0eb; --navy-light: #ebe3d9; --warm-white: #1a1207; --warm-gray: #5c4a32; --warm-black: #f5f0eb; /* Surfaces — warm cream palette */ --surface-1: #faf8f5; --surface-2: #f2ece4; --surface-3: #ebe3d9; /* Copper stays vibrant — brand identity anchor */ --copper: #a86523; --copper-light: #8b5216; --copper-rgb: 168, 101, 35; --copper-glow: rgba(168, 101, 35, 0.12); /* Semantic overrides */ --color-primary: var(--copper); --color-surface-1: var(--surface-1); --color-surface-2: var(--surface-2); --color-surface-3: var(--surface-3); --color-border: rgba(168, 101, 35, 0.12); --color-border-strong: rgba(168, 101, 35, 0.25); --color-text-1: #1a1207; --color-text-2: #5c4a32; --color-text-3: rgba(26, 18, 7, 0.45); /* Status — deeper tones for paper-white readability */ --green: #16a34a; --red: #dc2626; --yellow: #d97706; --blue: #2563eb; --purple: #7c3aed; /* ── SHADOWS — softer, warm paper feel ────────────── */ --shadow-sm: 0 1px 4px rgba(26, 18, 7, 0.06); --shadow-md: 0 4px 16px rgba(26, 18, 7, 0.08); --shadow-lg: 0 8px 32px rgba(26, 18, 7, 0.10); --shadow-glow: 0 0 24px rgba(168, 101, 35, 0.08); --shadow-card: 0 0 0 1px rgba(168, 101, 35, 0.08), 0 1px 3px rgba(26, 18, 7, 0.06), 0 4px 16px rgba(26, 18, 7, 0.04); --shadow-card-hover: 0 0 0 1px rgba(168, 101, 35, 0.15), 0 4px 8px rgba(26, 18, 7, 0.08), 0 8px 32px rgba(26, 18, 7, 0.06); --shadow-card-glass: 0 0 0 1px rgba(168, 101, 35, 0.06), 0 2px 8px rgba(26, 18, 7, 0.05), 0 4px 24px rgba(26, 18, 7, 0.03); --shadow-card-glass-hover: 0 0 0 1px rgba(168, 101, 35, 0.12), 0 4px 16px rgba(26, 18, 7, 0.08), 0 8px 40px rgba(26, 18, 7, 0.06); }