/* Timegem demo — brand foundations. * * Mirrors apps/web/src/app/globals.css (the real app's Tailwind v4 @theme * block) so the static demo reads identically to production. The Tailwind * Play CDN config in each page's maps these to named utilities * (bg-ink, text-linen, …); the raw CSS variables below are what the * productivity-bar gradients reference directly via inline styles. */ :root { /* Foundation — neutral palette (ElevenLabs-aligned) */ --color-ink: #0a0a0a; --color-slate-fg: #737373; --color-mist: #a0a0a0; --color-hairline: #e8e5e1; --color-page: #ffffff; --color-linen: #f5f2ed; /* Productivity — functional, used in charts/reports. */ --color-prod-productive: #10b981; --color-prod-neutral: #0ea5e9; --color-prod-unproductive: #f97316; --color-prod-flagged: #dc2626; --color-prod-idle: #cbd5e1; } html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--color-page); color: var(--color-ink); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The real app uses a `font-display` class on headings. Tailwind v4 never * defines a matching utility (brand.ts dropped Fraunces), so in production * those headings simply inherit Inter — replicate that here. */ .font-display { font-family: 'Inter', system-ui, -apple-system, sans-serif; } .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* Subtle, app-like scrollbars so dense tables/panels feel native. */ * { scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 9999px; } *::-webkit-scrollbar-thumb:hover { background: #b9b9b9; } /* Lucide icons render as inline SVGs; keep them from overflowing their slot * before createIcons() swaps the placeholder for the real . */ [data-lucide] { display: inline-block; vertical-align: middle; } /* Animated bits the demo reuses from the real UI (spinners, etc.). */ @keyframes demo-spin { to { transform: rotate(360deg); } } .demo-spin { animation: demo-spin 0.8s linear infinite; }