@tailwind base; @tailwind components; @tailwind utilities; /* * Design tokens — single source of truth (see docs/design-system.md §2). * Every token has a light and a dark value. Components must reference these * variables (via the Tailwind colour mappings in tailwind.config.js), never * hardcoded hex. Dark mode is driven by [data-theme="dark"] on . */ :root { /* Brand / neutral */ --c-bg-page: #F7F6F2; --c-bg-surface: #FFFFFF; --c-bg-subtle: #F1EFE8; --c-border: rgba(0, 0, 0, 0.12); --c-border-strong: rgba(0, 0, 0, 0.22); --c-text: #1F1F1D; --c-text-muted: #5F5E5A; --c-text-faint: #888780; /* Semantic — fill / text / border per status */ --c-success-fill: #E1F5EE; --c-success-text: #0F6E56; --c-success-border: #5DCAA5; --c-info-fill: #E6F1FB; --c-info-text: #185FA5; --c-info-border: #85B7EB; --c-warning-fill: #FAEEDA; --c-warning-text: #854F0B; --c-warning-border: #EF9F27; --c-danger-fill: #FCEBEB; --c-danger-text: #A32D2D; --c-danger-border: #F09595; --c-neutral-fill: #F1EFE8; --c-neutral-text: #5F5E5A; --c-neutral-border: #B4B2A9; /* Corner radius (design-system §5) */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; } [data-theme="dark"] { --c-bg-page: #1A1A18; --c-bg-surface: #242422; --c-bg-subtle: #2C2C2A; --c-border: rgba(255, 255, 255, 0.14); --c-border-strong: rgba(255, 255, 255, 0.26); --c-text: #F2F0EB; --c-text-muted: #A8A69E; --c-text-faint: #76746D; /* Dark semantic: darker fill, lighter text (success is spec-given; the rest follow the same pattern and are finalised during the UI step). */ --c-success-fill: #085041; --c-success-text: #9FE1CB; --c-success-border: #5DCAA5; --c-info-fill: #0E3A63; --c-info-text: #AFD2F2; --c-info-border: #2E6BA8; --c-warning-fill: #5A3B0A; --c-warning-text: #F2CE8E; --c-warning-border: #A9741C; --c-danger-fill: #5C1E1E; --c-danger-text: #F2B5B5; --c-danger-border: #A33B3B; --c-neutral-fill: #2C2C2A; --c-neutral-text: #A8A69E; --c-neutral-border: #4A4945; } @layer base { html { background-color: var(--c-bg-page); color: var(--c-text); } body { font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Two weights only — 400 and 500. Headings use 500, never heavier. */ h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.3; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } }