/* ============================================================ ARX — CSS Variables Single source of truth. Theme switching via [data-theme="dark"] on . ============================================================ */ :root { /* Background */ --color-bg-page: #F2F5F3; --color-bg-sidebar: #20282C; --color-bg-card: #FFFFFF; --color-bg-input: #FFFFFF; --color-bg-hover: #EEF3F0; --color-bg-overlay: rgba(32, 40, 44, 0.55); /* Accent & Highlight */ --color-accent: #3CB78A; --color-accent-hover: #32a87d; --color-accent-light: rgba(60, 183, 138, 0.12); --color-highlight: #E8B84B; --color-highlight-light:rgba(232, 184, 75, 0.15); /* Text */ --color-text-primary: #1A2E24; --color-text-secondary: #6A8A78; --color-text-muted: #9BAFA6; --color-text-inverse: #E8F0EC; --color-text-sidebar: #C8D8D0; --color-text-sidebar-active: #FFFFFF; /* Borders */ --color-border: #D8E4DC; --color-border-strong: #B8CEC4; /* Sidebar (always dark) */ --sidebar-bg: #20282C; --sidebar-width: 240px; --sidebar-group-label: #5A7068; --sidebar-item-hover: rgba(255,255,255,0.06); --sidebar-item-active: rgba(60, 183, 138, 0.18); --sidebar-item-active-border: #3CB78A; /* Status colors */ --color-success: #3CB78A; --color-warning: #E8B84B; --color-danger: #E05C5C; --color-info: #5B9BD5; /* Typography */ --font-heading: 'Doto', monospace; --font-body: 'Inter', sans-serif; /* Sizing */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; /* Shadows */ --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.05); --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06); --shadow-modal: 0 8px 40px rgba(0,0,0,0.18); /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.22s ease; --transition-slow: 0.35s ease; /* Layout */ --topbar-height: 73px; --card-padding: 20px; } /* ---- Dark Theme ---- */ [data-theme="dark"] { --color-bg-page: #1A1D20; --color-bg-card: #28343A; --color-bg-input: #1E2A30; --color-bg-hover: #222E34; --color-bg-overlay: rgba(0, 0, 0, 0.65); --color-text-primary: #E0E8E4; --color-text-secondary: #6A8A80; --color-text-muted: #4A6860; --color-border: #2E3A40; --color-border-strong: #3A4A50; }