/* ============================================================
Best AI Solutions — Design System v2 (Locked 2026-05-27)
Source of truth: memory/design-system.md
──────────────────────────────────────────────────────────────
LOCKSTEP CONTRACT (Phase 5a, 2026-05-28):
This file MUST stay byte-identical to:
app/shared/src/styles/design-system.css
When changing one, change the other.
──────────────────────────────────────────────────────────────
Linked by prototypes via:
Imported by React apps (admin + control-center) via:
import '../../shared/src/styles/design-system.css'
============================================================ */
/* ────────────────────────────────────────────────────────────
1. FOUNDATIONS — Theme Variables
Light "Stone" defaults; dark mode via .dark-mode class on .
────────────────────────────────────────────────────────────*/
:root {
--bg: #f1f5f9;
--bg-body: #f1f5f9;
--bg-card: #ffffff;
--bg-sidebar: #f8fafc;
--bg-header: #ffffff;
--bg-input: #f1f5f9;
--bg-task: #f1f5f9;
--border: #cbd5e1;
--border-light: #e2e8f0;
--text-primary: #1e293b;
--text-secondary: #475569;
--text-muted: #94a3b8;
--text-dim: #94a3b8;
--accent: #3b82f6;
--accent-hover: #2563eb;
--accent-light: #dbeafe;
--accent-text: #1d4ed8;
--success: #22c55e;
--success-light: #dcfce7;
--warning: #f59e0b;
--danger: #ef4444;
--sidebar-active: #dbeafe;
--sidebar-hover: #e2e8f0;
--row-hover: #eff6ff;
--card-shadow: 0 2px 6px rgba(0,0,0,0.06);
--shadow-lg: 0 4px 14px rgba(0,0,0,0.1);
}
.dark-mode {
--bg: #0f172a;
--bg-body: #0f172a;
--bg-card: #1e293b;
--bg-sidebar: #0f172a;
--bg-header: #0f172a;
--bg-input: #1e293b;
--bg-task: #334155;
--border: #334155;
--border-light: #334155;
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-muted: #475569;
--text-dim: #475569;
--sidebar-hover: #1e293b;
--row-hover: #243353;
--sidebar-active: #1e3a5f;
}
/* ────────────────────────────────────────────────────────────
2. THEME UTILITIES — shared across components
────────────────────────────────────────────────────────────*/
.theme-text { color: var(--text-primary); }
.theme-text-primary { color: var(--text-primary); } /* alias of .theme-text — see Lesson 6 / Keystone follow-up */
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-muted { color: var(--text-muted); }
.theme-text-dim { color: var(--text-dim); }
.theme-border { border-color: var(--border); }
.theme-border-light { border-color: var(--border-light); }
.theme-input { background-color: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
.theme-sidebar { background-color: var(--bg-sidebar); border-color: var(--border); }
.theme-header { background-color: var(--bg-header); border-color: var(--border); }
.theme-body { background-color: var(--bg-body); color: var(--text-primary); }
.theme-bg { background-color: var(--bg); }
.theme-bg-body { background-color: var(--bg-body); }
.theme-bg-card { background-color: var(--bg-card); }
.theme-bg-input { background-color: var(--bg-input); }
.theme-bg-sidebar { background-color: var(--bg-sidebar); }
.theme-bg-header { background-color: var(--bg-header); }
.theme-bg-task { background-color: var(--bg-task); }
.theme-divide > * + * { border-top: 1px solid var(--border-light); }
/* ────────────────────────────────────────────────────────────
3. BUTTONS — 5 types + 3 size modifiers + icon-only + block
Base: font-semibold rounded-lg transition-colors w/ disabled
────────────────────────────────────────────────────────────*/
.btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-warning, .btn-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 600;
border-radius: 0.5rem;
font-size: 0.875rem;
padding: 0.5rem 1rem;
transition: background-color 150ms, border-color 150ms, color 150ms;
cursor: pointer;
white-space: nowrap;
border: 1px solid transparent;
}
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-success:disabled, .btn-warning:disabled, .btn-link:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary { background-color: #2563eb; color: #ffffff; }
.btn-primary:hover { background-color: #1d4ed8; }
.btn-secondary { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { border-color: #60a5fa; }
.btn-danger { background-color: #dc2626; color: #ffffff; }
.btn-danger:hover { background-color: #b91c1c; }
.btn-success { background-color: #059669; color: #ffffff; }
.btn-success:hover { background-color: #047857; }
.btn-warning { background-color: #d97706; color: #ffffff; }
.btn-warning:hover { background-color: #b45309; }
.btn-link {
background: transparent;
color: #2563eb;
padding: 0;
border: 0;
}
.btn-link:hover { color: #1d4ed8; text-decoration: underline; }
/* Option button — selectable card pattern */
.btn-option {
display: block;
width: 100%;
text-align: left;
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 0.75rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-primary);
transition: border-color 150ms, background-color 150ms;
cursor: pointer;
}
.btn-option:hover { border-color: #93c5fd; }
.btn-option-active { border-color: #3b82f6; background-color: #eff6ff; }
.dark-mode .btn-option-active { background-color: rgba(30, 58, 138, 0.2); }
/* Icon-only button */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.375rem;
border-radius: 0.5rem;
background: transparent;
color: var(--text-muted);
transition: background-color 150ms, color 150ms;
cursor: pointer;
border: 0;
}
.btn-icon:hover { background-color: #f1f5f9; color: #3b82f6; }
.dark-mode .btn-icon:hover { background-color: rgba(51, 65, 85, 0.5); }
/* Size modifiers */
.btn-sm { font-size: 0.75rem; padding: 0.375rem 0.75rem; }
.btn-lg { font-size: 1rem; padding: 0.625rem 1.25rem; }
/* Layout modifier */
.btn-block { width: 100%; }
/* Feature modifier — wizard commit buttons (larger rounding + shadow) */
.btn-feature {
border-radius: 0.75rem; /* rounded-xl */
padding: 0.625rem 1rem; /* py-2.5 px-4 */
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
/* Toggle switch — used in Settings notifications + Reports preferences.
Apply .toggle-track to the