/* ============================================
BODYGUARD PANEL — DESIGN TOKENS
CSS Custom Properties, Fonts
Safe to load globally — no element selectors
============================================ */
/* --- Fonts ---
Loaded via + a single combined
in utils/fragments/header_assets.php (included in every page's ), NOT via
@import. CSS @import serialises the network: the browser must download+parse this
file before it even discovers the font URLs, blocking text/icon paint behind a
waterfall. Keep font requests out of here. */
/* --- Design Tokens --- */
:root {
/* Brand */
--brand-50: #EFF6FF;
--brand-100: #DBEAFE;
--brand-200: #BFDBFE;
--brand-300: #93C5FD;
--brand-400: #60A5FA;
--brand-500: #3B82F6;
--brand-600: #2563EB;
--brand-700: #1D4ED8;
/* Neutrals (Slate) */
--gray-25: #FCFCFD;
--gray-50: #F8FAFC;
--gray-100: #F1F5F9;
--gray-200: #E2E8F0;
--gray-300: #CBD5E1;
--gray-400: #94A3B8;
--gray-500: #64748B;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1E293B;
--gray-900: #0F172A;
--gray-950: #020617;
/* Semantic */
--success: #10B981;
--success-light: rgba(16, 185, 129, 0.1);
--warning: #F59E0B;
--warning-light: rgba(245, 158, 11, 0.1);
--error: #EF4444;
--error-light: rgba(239, 68, 68, 0.1);
--info: #3B82F6;
--info-light: rgba(59, 130, 246, 0.1);
/* Badges */
--badge-structure: #DC2626;
--badge-structure-bg: rgba(220, 38, 38, 0.1);
--badge-context: #16A34A;
--badge-context-bg: rgba(22, 163, 74, 0.1);
/* Surfaces */
--surface-primary: #FFFFFF;
--surface-secondary: #F8FAFC;
--surface-elevated: #f5f5f5;
--surface-overlay: rgba(0, 0, 0, 0.5);
--page-bg: #F8FAFC;
/* Borders */
--border-primary: #E2E8F0;
--border-secondary: #F1F5F9;
--border-focus: #3B82F6;
/* Text */
--text-primary: #1E293B;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-inverse: #FFFFFF;
--text-link: #3B82F6;
/* Sidebar */
--sidebar-bg: #0F172A;
--sidebar-hover: #1E293B;
--sidebar-active-bg: rgba(59, 130, 246, 0.12);
--sidebar-text: #94A3B8;
--sidebar-text-hover: #CBD5E1;
--sidebar-text-active: #F1F5F9;
--sidebar-section-text: #64748B;
--sidebar-border: rgba(255, 255, 255, 0.06);
--sidebar-width: 300px;
--sidebar-collapsed-width: 64px;
/* Header */
--header-bg: #FFFFFF;
--header-border: #E2E8F0;
--header-height: 56px;
/* Shadows */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
--text-xs: 0.75rem;
--text-sm: 0.8125rem;
--text-base: 0.875rem;
--text-lg: 1rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Spacing */
--space-0: 0;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--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;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.25rem;
--radius-full: 9999px;
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
/* Z-index layers */
--z-sidebar: 40;
--z-header: 50;
--z-dropdown: 60;
--z-modal-backdrop: 70;
--z-modal: 80;
--z-chat: 90;
--z-tooltip: 100;
/* Rules editor */
--line-bg: oklch(from var(--brand-100) l c h / .75);
--line-bg-hovered: oklch(from var(--brand-100) calc(l*1.03) c h);
/* Box element colors (word/synonym/plugin chips in rules editor) */
--box-text-bg: #16a34a;
--box-text-color: #fff;
--box-synonym-bg: #9333ea;
--box-synonym-color: #fff;
--box-plugin-bg: #2563eb;
--box-plugin-color: #fff;
--box-multiple-bg: #d97706;
--box-multiple-color: #fff;
--box-suggestion-bg: #dc2626;
--box-suggestion-color: #fff;
--box-none-bg: #475569;
--box-none-color: #fff;
--box-selection-outline: var(--brand-500);
--box-optional-border: #94a3b8;
--box-override-stroke: var(--brand-500);
/* --- Languages tabs buttons --- */
--tab-has-content: oklch(from var(--brand-500) calc(l*.8) c h /.06);
--tab-has-content-hovered: oklch(from var(--brand-500) calc(l*.8) c h /.2);
/* --- Element conflicts --- */
--critical-conflict-bg: var(--error-light);
--critical-conflict-color: #991B1B;
--critical-conflict-border: 2px solid rgba(239, 68, 68, 0.4);
}
/* --- Dark Mode --- */
[data-theme="dark"] {
--surface-primary: #1E293B;
--surface-secondary: #0F172A;
--surface-elevated: #334155;
--surface-overlay: rgba(0, 0, 0, 0.7);
--page-bg: #0F172A;
--border-primary: #334155;
--border-secondary: #1E293B;
--text-primary: #F1F5F9;
--text-secondary: #94A3B8;
--text-tertiary: #64748B;
--text-link: #60A5FA;
--header-bg: #0F172A;
--header-border: #1E293B;
--sidebar-bg: #020617;
--sidebar-hover: #0F172A;
--sidebar-active-bg: rgba(59, 130, 246, 0.15);
--sidebar-border: rgba(255, 255, 255, 0.04);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
--gray-50: #0F172A;
--gray-100: #1E293B;
--gray-200: #334155;
--gray-800: #E2E8F0;
--gray-900: #F1F5F9;
/* Rules editor */
--line-bg: oklch(from var(--brand-100) l c h / .2);
--line-bg-hovered: oklch(from var(--brand-100) l c h / .3);
/* Box element colors — dark mode */
--box-text-bg: #15803d;
--box-text-color: #f0fdf4;
--box-synonym-bg: #7e22ce;
--box-synonym-color: #faf5ff;
--box-plugin-bg: #1d4ed8;
--box-plugin-color: #eff6ff;
--box-multiple-bg: #b45309;
--box-multiple-color: #fffbeb;
--box-suggestion-bg: #b91c1c;
--box-suggestion-color: #fef2f2;
--box-none-bg: #64748b;
--box-none-color: #f8fafc;
--box-selection-outline: var(--brand-400);
--box-optional-border: #64748b;
/* --- Languages tabs buttons --- */
--tab-has-content: oklch(from var(--brand-500) calc(l*1.1) c h /.2);
--tab-has-content-hovered: oklch(from var(--brand-500) calc(l*1.1) c h /.4);
/* --- Element conflicts --- */
--critical-conflict-bg: rgb(239 68 68 / 19%);
--critical-conflict-color: #f95d5d;
--critical-conflict-border: 2px solid rgb(255 130 130 / 40%);
}
/* --- Material Symbols --- */
.material-symbols-outlined {
font-size: inherit;
line-height: 1;
color: inherit;
vertical-align: middle;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.material-symbols-outlined.filled {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}