/* Sencurio 1.0 — Shared Design Tokens Dual-theme (light + dark) design system Use data-theme="light" | "dark" on for manual override Falls back to prefers-color-scheme when no override is set */ :root, [data-theme="light"] { /* Layout */ --navbar-height: 68px; /* Brand — sladěno s web-dashboard / Vision (primary ≥4.5:1 s bílým textem na tlačítkách) */ --color-primary: #0062CC; --color-primary-light: #0054B0; --color-primary-dark: #003D82; --color-accent: #00C6AE; /* Jednotná oranžová napříč webem: lehce tmavší a méně žlutá */ --color-brand-i-dot: #dc6013; --color-cta: #dc6013; /* Hover: lehké zesvětlení; text na CTA zůstává bílý */ --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, #ffffff 12%); --color-cta-text: #ffffff; /* Backgrounds */ --color-bg-base: #F4F7FC; --color-bg-surface: #FFFFFF; --color-bg-elevated: #E8EEF6; --color-hero-bg: #E8EEF6; --color-bg-sidebar: #EDF2F9; --color-bg-overlay: rgba(0, 0, 0, 0.4); /* Text */ --color-text-primary: #333333; --color-text-secondary: #5C6880; /* Dříve #9AA0AD — příliš slabý kontrast na bílé / světlém pozadí (Lighthouse a11y) */ --color-text-muted: #5C6570; --color-text-on-primary: #FFFFFF; /* Status */ --color-status-ok: #22C55E; --color-status-warning: #F59E0B; --color-status-danger: #DC3545; --color-status-fall-suspect: #F97316; --color-status-fall-confirmed: #DC2626; --color-status-offline: #94A3B8; /* Borders */ --color-border: #C5D3E5; --color-border-focus: #0062CC; /* Shadows — softer, reduced blue intensity */ --shadow-card: 0 1px 8px rgba(20, 60, 120, 0.06), 0 4px 16px rgba(20, 60, 120, 0.04); --shadow-elevated: 0 4px 24px rgba(20, 60, 120, 0.10), 0 12px 40px rgba(20, 60, 120, 0.06); /* Misc */ --color-scrollbar: #C8D4E8; --color-scrollbar-thumb: #B0BCC9; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-panel: 0.625rem; --radius-full: 9999px; /* Glass nav (semi-transparent for blur effect) */ --color-glass-bg: rgba(255, 255, 255, 0.72); --color-glass-border: rgba(197, 211, 229, 0.95); } [data-theme="dark"] { /* Brand — slightly lighter for contrast on dark bg */ --color-primary: #4A90F0; --color-primary-light: #6AAAFF; --color-primary-dark: #1A6FE8; --color-accent: #00DBC0; --color-brand-i-dot: #dc6013; --color-cta: #dc6013; --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, #ffffff 12%); --color-cta-text: #ffffff; /* Backgrounds */ --color-bg-base: #0F1117; --color-bg-surface: #181C25; --color-bg-elevated: #1E2333; --color-hero-bg: #13161F; --color-bg-sidebar: #151922; --color-bg-overlay: rgba(0, 0, 0, 0.6); /* Text */ --color-text-primary: #E8ECF4; --color-text-secondary: #9AA5BA; --color-text-muted: #5A6375; --color-text-on-primary: #FFFFFF; /* Status — same hues, slightly brighter */ --color-status-ok: #34D399; --color-status-warning: #FBBF24; --color-status-danger: #F87171; --color-status-fall-suspect: #f97316; --color-status-fall-confirmed: #F87171; --color-status-offline: #64748B; /* Borders */ --color-border: #2A3147; --color-border-focus: #4A90F0; /* Shadows */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35); --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.5); /* Misc */ --color-scrollbar: #1E2333; --color-scrollbar-thumb: #2A3147; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-panel: 0.625rem; --radius-full: 9999px; /* Glass nav (semi-transparent for blur effect) */ --color-glass-bg: rgba(26, 26, 46, 0.65); --color-glass-border: rgba(255, 255, 255, 0.08); } /* Smooth transition on theme switch (except for color-sensitive UI like charts) */ *, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease; } /* Disable transition for elements that should NOT animate (charts, radar, video) */ .no-theme-transition, canvas, video { transition: none !important; } /* System preference fallback: when no data-theme is set, use OS preference */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Brand — slightly lighter for contrast on dark bg */ --color-primary: #4A90F0; --color-primary-light: #6AAAFF; --color-primary-dark: #1A6FE8; --color-accent: #00DBC0; --color-brand-i-dot: #dc6013; --color-cta: #dc6013; --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, #ffffff 12%); --color-cta-text: #ffffff; /* Backgrounds */ --color-bg-base: #0F1117; --color-bg-surface: #181C25; --color-bg-elevated: #1E2333; --color-bg-sidebar: #151922; --color-bg-overlay: rgba(0, 0, 0, 0.6); --color-hero-bg: #13161F; /* Text */ --color-text-primary: #E8ECF4; --color-text-secondary: #9AA5BA; --color-text-muted: #5A6375; --color-text-on-primary: #FFFFFF; /* Status — same hues, slightly brighter */ --color-status-ok: #34D399; --color-status-warning: #FBBF24; --color-status-danger: #F87171; --color-status-fall-suspect: #f97316; --color-status-fall-confirmed: #F87171; --color-status-offline: #64748B; /* Borders */ --color-border: #2A3147; --color-border-focus: #4A90F0; /* Shadows */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35); --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.5); /* Misc */ --color-scrollbar: #1E2333; --color-scrollbar-thumb: #2A3147; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-panel: 0.625rem; --radius-full: 9999px; /* Glass nav */ --color-glass-bg: rgba(26, 26, 46, 0.65); --color-glass-border: rgba(255, 255, 255, 0.08); } }