/* packages/ui - DESIGN TOKENS + BASE LAYER Light beige theme. Source of truth for colour/spacing/radius. Load order: fonts.css, tokens.css, components.css, nav.css */ :root { --bg: #faf6ee; --bg-elev: #ede2cc; --bg-elev-2: #e0d3b6; --border: rgba(0,0,0,0.10); --border-strong: rgba(0,0,0,0.18); --text: #1a1611; --text-muted: #4a4234; --text-dim: #807766; --coral: #ff575f; --coral-hover: #ff3d47; --coral-soft: rgba(255,87,95,0.12); --green: #22a06b; --amber: #c2860a; --red: #d6403a; --blue: #2563eb; --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --sidebar-w: 240px; --sidebar-rail: 56px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: var(--bg); color: var(--text); font-family: 'Haffer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* Ambient background glow - add class="app-bg" to on shell pages. */ body.app-bg::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 10%, rgba(255,87,95,0.05), transparent 45%), radial-gradient(circle at 85% 90%, rgba(37,99,235,0.04), transparent 50%); z-index: 0; } body.app-bg > *:not(.app-sidebar):not(.drawer-overlay) { position: relative; z-index: 2; } /* Shared keyframes */ @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } }