/* * Mirrored from semtixmarketing/public/css/variables.css @ b364d7f on 2026-04-18 * Rebrand teal/amber per Phase 1 CONTEXT.md (was sibling's emerald #047857). * Severity tokens added for future audit UI (Phase 3+). */ :root { /* Primary — teal (SemtixAnal rebrand; WCAG AA contrast with white ≥4.5:1) */ --primary: #0d9488; --primary-hover: #0f766e; --primary-dark: #0f766e; --primary-light: #14b8a6; --primary-lighter: #ccfbf1; /* Accent — amber for callouts + warnings */ --accent: #f59e0b; --accent-hover: #d97706; --accent-light: #fef3c7; /* Semantic colors */ --success: #10b981; --success-hover: #059669; --success-light: rgba(16, 185, 129, 0.1); --warning: #f59e0b; --warning-hover: #d97706; --warning-light: rgba(245, 158, 11, 0.1); --danger: #dc2626; --danger-hover: #b91c1c; --danger-light: rgba(220, 38, 38, 0.1); /* Severity tokens — consumed by audit UI from Phase 3 onward. * Mapping: Critical (Kritické) = danger red; Important (Důležité) = amber; Recommendation (Doporučení) = green. */ --severity-critical: #dc2626; --severity-critical-light: #fee2e2; --severity-important: #f59e0b; --severity-important-light: #fef3c7; --severity-recommendation: #10b981; --severity-recommendation-light: #d1fae5; /* Backgrounds (light theme) */ --background: #ffffff; --bg: #f5f5f5; --bg-secondary: #eaeaea; --bg-card: #ffffff; --surface: #f9fafb; --surface-hover: #f3f4f6; /* Borders */ --border: #e5e7eb; --border-light: #f0f0f0; --border-dark: #d1d5db; /* Text */ --text: #1f2937; --text-secondary: #374151; --text-muted: #6b7280; --link-color: var(--primary); /* Shadows */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); /* Radii */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* Typography */ --font-xs: 11px; --font-sm: 12px; --font-base: 14px; --font-md: 15px; --font-lg: 16px; --font-xl: 18px; --font-2xl: 22px; --font-3xl: 28px; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Z-index layers */ --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 900; --z-modal: 1000; --z-toast: 9999; /* Transitions */ --transition-fast: 0.1s ease; --transition-base: 0.15s ease; --transition-slow: 0.3s ease; /* Layout */ --header-height: 56px; --sidebar-width: 280px; --content-max-width: 90%; } /* GOTCHA-10: dark mode toggled via [data-theme="dark"] on ; see app.html inline pre-paint script. */ [data-theme="dark"] { --background: #111827; --bg: #0f172a; --bg-secondary: #1e293b; --bg-card: #1f2937; --surface: #1f2937; --surface-hover: #374151; --text: #f9fafb; --text-secondary: #e5e7eb; --text-muted: #9ca3af; --border: #374151; --border-light: #4b5563; --border-dark: #6b7280; }