/* ============================================= Design tokens — single source of truth. Loaded by both layouts/app and layouts/panel before their layout-specific stylesheet. Theme is selected by [data-theme="dark"|"light"] on . Default (no attribute) = light. ============================================= */ /* --- Light (default) --- */ :root, [data-theme="light"] { /* Surfaces */ --bg-app: #f7f7f8; --bg-surface: #ffffff; --bg-surface-2: #f0f0f2; --bg-overlay: rgba(0, 0, 0, 0.5); /* Text */ --text-primary: #1a1a1a; --text-secondary: #6e6e6e; --text-muted: #8a8a8a; --text-on-accent: #1a1a1a; /* Borders & hover */ --border-subtle: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.12); --hover-bg: rgba(0, 0, 0, 0.01); /* Scrollbar */ --scrollbar-thumb: rgba(0, 0, 0, 0.18); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3); /* Accent (brand stays constant; only hover differs) */ --accent: #985eca; --accent-2: #c9def4; --accent-hover: #a48fb8; --accent-bg: rgba(184, 164, 201, 0.18); --accent-border: rgba(184, 164, 201, 0.4); /* Status */ --danger-fg: #c0392b; --danger-bg: rgba(248, 113, 113, 0.12); --success-fg: #1a7f3f; --success-bg: rgba(34, 197, 94, 0.12); --warning-fg: #b8740a; --warning-bg: rgba(254, 187, 48, 0.18); /* Toast surfaces (used by Toastify in layouts/panel) */ --toast-success-bg: #ecfdf3; --toast-error-bg: #fef2f2; /* Selection */ --selection-bg: rgba(184, 164, 201, 0.35); /* --- Legacy aliases (kept until dashboard.css is fully tokenized) --- */ --primary-color: #2E2D2B; } /* --- Dark --- */ [data-theme="dark"] { /* Surfaces */ --bg-app: #111111; --bg-surface: #151515; --bg-surface-2: #1a1a1a; --bg-overlay: rgba(0, 0, 0, 0.7); /* Text */ --text-primary: #f4f3f3; --text-secondary: #838384; --text-muted: #666666; --text-on-accent: #111111; /* Borders & hover */ --border-subtle: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --hover-bg: rgba(255, 255, 255, 0.04); /* Scrollbar */ --scrollbar-thumb: rgba(255, 255, 255, 0.1); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.18); /* Accent */ --accent: #b8a4c9; --accent-2: #c9def4; --accent-hover: #cdbfda; --accent-bg: rgba(184, 164, 201, 0.1); --accent-border: rgba(184, 164, 201, 0.2); /* Status */ --danger-fg: #f87171; --danger-bg: rgba(248, 113, 113, 0.15); --success-fg: #86efac; --success-bg: rgba(34, 197, 94, 0.15); --warning-fg: #fbbf24; --warning-bg: rgba(254, 187, 48, 0.08); /* Toast surfaces */ --toast-success-bg: #111a11; --toast-error-bg: #1a1111; /* Selection */ --selection-bg: rgba(184, 164, 201, 0.3); }