/* Monochrome theme. No brand color — dark theme is white-on-black, light theme is black-on-white. --accent and --bg-primary use !important so they win over the inline values branding.js writes onto the root. */ :root { --bg-primary: #0a0a0a !important; --bg-secondary: #141414; --bg-card: #161616; --bg-card-hover: #202020; --bg-input: #0d0d0d; --accent: #ffffff !important; --accent-hover: #e5e5e5; --accent-dim: #cccccc; --on-accent: #000000; /* text/icon color on an accent-filled surface */ --accent-soft: rgba(255, 255, 255, 0.08); /* subtle accent-tinted background */ --text-primary: #f5f5f5; --text-secondary: #a3a3a3; --text-muted: #6b6b6b; --success: #22c55e; --success-dim: #15803d; --danger: #ef4444; --danger-dim: #991b1b; --warning: #f59e0b; --warning-dim: #92400e; --border: #2a2a2a; --border-light: #3d3d3d; --radius: 8px; --radius-lg: 12px; --shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --sidebar-width: 220px; --transition: 0.2s ease; } /* Light theme — toggled via data-theme="light" on (see index.html). */ :root[data-theme="light"] { --bg-primary: #ffffff !important; --bg-secondary: #f5f5f5; --bg-card: #ffffff; --bg-card-hover: #f2f2f2; --bg-input: #ffffff; --accent: #000000 !important; --accent-hover: #1a1a1a; --accent-dim: #333333; --on-accent: #ffffff; --accent-soft: rgba(0, 0, 0, 0.05); --text-primary: #0a0a0a; --text-secondary: #525252; --text-muted: #8a8a8a; --border: #e5e5e5; --border-light: #d4d4d4; --shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); }