/* SmarTeeth Design Tokens * Single source of truth for colors, typography, spacing, radii, shadows. * Do not duplicate values elsewhere. Bootstrap overrides consume these. * * THEMING: this :root block is the default theme ("oceano"). Every other * theme overrides the same custom properties in themes.css via a * [data-st-theme=""] selector on . Dark themes additionally get * data-bs-theme="dark" (set by ST.theme) so native Bootstrap surfaces flip. * Never hardcode a color in component CSS: consume a token. */ :root { /* Brand — palette derived from the SmarTeeth tooth+wordmark logo (4B). */ --st-brand: #1F3A6E; --st-brand-rgb: 31, 58, 110; --st-brand-dark: #152547; --st-brand-light: #E3F1FB; --st-brand-accent: #5BC0EB; --st-on-brand: #FFFFFF; /* text color on brand-colored surfaces */ /* Semantic action colors (mirror CLAUDE.md button convention) */ --st-success: #1F9D55; --st-danger: #D64545; --st-warning: #E08E0B; --st-info: #3182CE; --st-success-rgb: 31, 157, 85; --st-danger-rgb: 214, 69, 69; --st-warning-rgb: 224, 142, 11; --st-info-rgb: 49, 130, 206; /* Neutral scale */ --st-neutral-100: #F7FAFC; --st-neutral-200: #EDF2F7; --st-neutral-300: #E2E8F0; --st-neutral-400: #CBD5E0; --st-neutral-500: #A0AEC0; --st-neutral-600: #718096; --st-neutral-700: #4A5568; --st-neutral-800: #2D3748; --st-neutral-900: #1A202C; /* Text */ --st-text: var(--st-neutral-900); --st-text-muted: var(--st-neutral-600); --st-link: var(--st-brand); /* Surfaces (page background, cards/panels, secondary panels, borders) */ --st-bg: #FFFFFF; --st-surface: #FFFFFF; --st-surface-2: var(--st-neutral-100); --st-border: var(--st-neutral-300); /* App chrome */ --st-topbar-bg: var(--st-brand); --st-topbar-text: #FFFFFF; --st-sidebar-bg: var(--st-neutral-100); --st-sidebar-text: var(--st-text); --st-sidebar-icon: var(--st-brand); --st-sidebar-active-bg: var(--st-brand-light); /* Typography scale */ --st-fs-xs: 0.75rem; --st-fs-sm: 0.875rem; --st-fs-base: 1rem; --st-fs-lg: 1.125rem; --st-fs-h2: 1.5rem; --st-fs-h1: 2rem; /* Radii */ --st-radius-sm: 4px; --st-radius: 8px; --st-radius-lg: 12px; /* Shadows */ --st-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --st-shadow: 0 4px 12px rgba(0,0,0,0.08); --st-shadow-lg: 0 10px 30px rgba(0,0,0,0.12); /* Layout */ --st-topbar-h: 56px; --st-sidebar-w: 240px; --st-sidebar-rail-w: 64px; }