/* English comments are mandatory. */ /* Design tokens — the Slovoprav design system (relevance_engine/static/css/variables.css) with Vestohod's own accent: blue instead of emerald, so the tools of the ecosystem share one look and differ by colour. Green stays the colour of «in the index». Light theme is the default; dark theme activates via [data-theme="dark"] on . */ :root { /* --- Surfaces --- */ --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-hover: #f1f5f9; --bg-sidebar: #090d16; --bg-sidebar-hover: #111827; --bg-sidebar-active: #1f2937; /* --- Text --- */ --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-sidebar: #cbd5e1; --text-sidebar-active: #ffffff; /* --- Accent (Vestohod blue) --- */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-subtle: rgba(37, 99, 235, 0.08); --accent-text: #ffffff; /* --- Semantic --- */ --success: #059669; --success-bg: rgba(5, 150, 105, 0.1); --success-text: #065f46; --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.1); --warning-text: #92400e; --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.08); --danger-text: #991b1b; --info: #0284c7; --info-bg: rgba(2, 132, 199, 0.08); --info-text: #0c4a6e; /* --- Borders & Shadows --- */ --border: #e2e8f0; --border-subtle: #f1f5f9; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); /* --- Radii --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; /* --- Typography --- */ --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.8125rem; --font-size-base: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --line-height: 1.6; /* --- Spacing --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* --- Layout --- */ --sidebar-width: 250px; --sidebar-collapsed: 68px; --header-height: 60px; --content-max-width: 1200px; --transition: 0.2s ease; --transition-slow: 0.3s ease; color-scheme: light; } [data-theme="dark"] { --bg-primary: #090a0f; --bg-secondary: #12131a; --bg-card: #1a1b24; --bg-hover: #222431; --bg-sidebar: #090a0f; --bg-sidebar-hover: #12131a; --bg-sidebar-active: #1a1b24; --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-muted: #6b7280; --text-sidebar: #9ca3af; --text-sidebar-active: #ffffff; /* A lighter blue with dark text on it: white on blue-500 fails the contrast bar. */ --accent: #60a5fa; --accent-hover: #93c5fd; --accent-subtle: rgba(96, 165, 250, 0.15); --accent-text: #0b1220; --success: #10b981; --success-bg: rgba(16, 185, 129, 0.14); --success-text: #34d399; --warning: #fbbf24; --warning-bg: rgba(245, 158, 11, 0.14); --warning-text: #fbbf24; --danger: #f87171; --danger-bg: rgba(239, 68, 68, 0.14); --danger-text: #f87171; --info: #22d3ee; --info-bg: rgba(6, 182, 212, 0.14); --info-text: #22d3ee; --border: #262936; --border-subtle: #1d202b; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); color-scheme: dark; }