/* ============================================================ ALSİN ALARM İZLEME MERKEZİ — DESIGN TOKENS Tek kaynak: tüm renk / boşluk / gölge değişkenleri burada. Tema: html[data-theme="light"] (varsayılan) / html[data-theme="dark"] theme.js bu attribute'u üzerine yazar (bkz. index.html içindeki no-flash bootstrap script). ============================================================ */ :root, html[data-theme="light"] { color-scheme: light; /* Marka */ --primary: #D3131A; --primary-dark: #A80F14; --primary-light: #FDE9E9; --primary-glow: rgba(211, 19, 26, 0.28); --on-primary: #FFFFFF; /* Yüzeyler */ --bg: #FFFFFF; --surface: #F6F6F7; --surface-alt: #EFF0F2; --surface-raised: #FFFFFF; --surface-inverse: #14161A; --surface-inverse-raised: #1E2126; /* Kenarlık */ --border: #E4E5E8; --border-strong: #D2D4D8; --border-inverse: rgba(255, 255, 255, 0.09); /* Metin */ --text: #14161A; --text-inverse: #F4F4F2; --muted: #6B7078; --muted-light: #9297A0; --muted-inverse: #9297A0; /* Gölge */ --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06); --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.08); --shadow-lg: 0 24px 56px rgba(20, 22, 26, 0.14); --shadow-glow: 0 0 0 1px var(--border), 0 20px 48px rgba(20, 22, 26, 0.1); /* Durum renkleri (sistem sağlığı / demo UI) */ --status-ok: #1E9E5A; --status-ok-bg: rgba(30, 158, 90, 0.12); --status-live: #D3131A; /* Her zaman koyu olan yüzeyler (footer, monitoring, command-center...) üzerinde yeterli kontrast için kullanılan aydınlık kırmızı — bkz. components.css'te "her zaman koyu" bileşen listesi. */ --accent-on-dark: #FF6B6E; /* Tipografi */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Şekil / boşluk */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-xl: 28px; --container-width: 1240px; --header-height: 84px; --header-height-scrolled: 76px; /* Geçiş */ --transition-fast: 0.2s ease; --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --theme-transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } html[data-theme="dark"] { color-scheme: dark; --primary: #FF3B41; --primary-dark: #FF6B6E; --primary-light: rgba(255, 59, 65, 0.16); --primary-glow: rgba(255, 59, 65, 0.45); --on-primary: #14161A; --bg: #090B0F; --surface: #12151B; --surface-alt: #171A21; --surface-raised: #14171E; --surface-inverse: #050608; --surface-inverse-raised: #0D1015; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-inverse: rgba(255, 255, 255, 0.1); --text: #EDEDEA; --text-inverse: #EDEDEA; --muted: #9A9FA8; --muted-light: #6E7280; --muted-inverse: #9297A0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5); --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 0 1px var(--border), 0 0 40px rgba(255, 59, 65, 0.08); --status-ok: #35D07F; --status-ok-bg: rgba(53, 208, 127, 0.14); --status-live: #FF3B41; --accent-on-dark: #FF3B41; } /* JS devre dışıysa / henüz çalışmadıysa sistem tercihine göre güvenli geri dönüş. theme.js her zaman data-theme attribute'unu ilk boyamadan önce yazdığı için normal koşullarda bu blok hiç devreye girmez; yalnızca bir emniyet ağıdır. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; --primary: #FF3B41; --primary-dark: #FF6B6E; --primary-light: rgba(255, 59, 65, 0.16); --primary-glow: rgba(255, 59, 65, 0.45); --on-primary: #14161A; --bg: #090B0F; --surface: #12151B; --surface-alt: #171A21; --surface-raised: #14171E; --surface-inverse: #050608; --surface-inverse-raised: #0D1015; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-inverse: rgba(255, 255, 255, 0.1); --text: #EDEDEA; --text-inverse: #EDEDEA; --muted: #9A9FA8; --muted-light: #6E7280; --muted-inverse: #9297A0; --status-ok: #35D07F; --status-ok-bg: rgba(53, 208, 127, 0.14); --status-live: #FF3B41; --accent-on-dark: #FF3B41; } }