/** * Chattu app design tokens — shared by dashboard, chat, admin. * Legacy aliases keep existing dashboard-marketing.css rules working. */ :root { --font-sans: "Inter", system-ui, -apple-system, sans-serif; /* Softer, deeper dark surfaces (less harsh than slate-900) */ --bg-app: #0a0f18; --bg-elevated: #121a26; --bg-muted: #2a3441; --bg-card: #1c2634; --text-primary: #e8eef5; --text-secondary: #b8c5d3; --text-muted: #8b9aad; --border-subtle: rgba(148, 163, 184, 0.12); --accent: #25d366; --accent-hover: #128c7e; --accent-muted: rgba(37, 211, 102, 0.2); --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #06b6d4; --primary-blue: #3b82f6; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Toasts / floating UI on dark surfaces */ --shadow-toast: 0 12px 40px rgba(0, 0, 0, 0.45); --focus-ring: 0 0 0 0.2rem var(--accent-muted); --transition: all 0.3s ease; /* Legacy — dashboard-marketing.css */ --color-bg-primary: var(--bg-app); --color-bg-secondary: var(--bg-elevated); --color-bg-card: var(--bg-card); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-primary: var(--primary-blue); --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger); --color-info: var(--info); --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --border-radius: var(--radius-md); --border-color: var(--border-subtle); } /** * Light marketing / docs / auth (card on gray) — scope on */ html.chattu-light { --bg-app: #f1f5f9; --bg-elevated: #ffffff; --bg-muted: #e2e8f0; --bg-card: #ffffff; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --border-subtle: rgba(15, 23, 42, 0.1); --shadow-toast: 0 10px 30px rgba(15, 23, 42, 0.12); }