/* * Cogumi Meet theme — matches voice.cogumi.com exactly (same CSS variable * names on purpose, so a future shared/site-nav.css can drop in unmodified). * Do not introduce a light theme or a different palette without updating * voice.cogumi.com to match — the two products must stay visually consistent. */ :root { /* Tells the browser to use its dark-themed native form controls (date/time picker popups, scrollbars, etc.) instead of the light default -- those popups render as browser/OS chrome, outside our DOM, so this is the only way to theme them; page CSS can't reach inside them directly. */ color-scheme: dark; --bg: #0b0b12; --surface: #12121c; --surface-2: #191926; --line: #29293a; --fg: #f4f3fb; --muted: #9b9aaa; --faint: #696878; --purple: #8b6cff; --purple-2: #b9a9ff; --mint: #8de8c2; /* good fit for "connected / active call" status */ --yellow: #ffd66b; --radius: 18px; --radius-pill: 999px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /* Lucide (loaded via CDN, see each page's ) replaces every [data-lucide] element with an inline at render time -- style the rendered SVG, not the now-gone attribute. stroke="currentColor" is already set by Lucide itself, so icons pick up whatever text color they're placed in for free. */ /* Toggle-state icon pairs (e.g. mic/mic-off, zap/loader-circle) MUST use this class, not the `hidden` attribute -- Lucide's icon replacement builds a new and doesn't reliably carry `hidden` over from the original element, but it does preserve `class`. Using `hidden` here silently produced two overlapping icons at once (visible in production: the loading spinner and idle icon both showing). */ .icon-hidden { display: none !important; } svg.lucide { width: 16px; height: 16px; flex-shrink: 0; } h1 svg.lucide, h2 svg.lucide { width: 20px; height: 20px; vertical-align: -3px; } /* Used on any loading/in-progress icon (button spinners, waiting/reconnecting screens). `transition: none` above doesn't stop a running `animation`, so it needs its own reduced-motion override. */ .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spin { animation: none; } } /* TODO: page-specific layout (hero, scheduler form, side rail, lobby, call stage) goes in dedicated files, not here. Keep this file to tokens + base reset only. */