:root {
    --color-paper: #faf8f5;
    --color-surface: #ffffff;
    --color-surface2: #f3efe8;
    --color-line: #e2dccf;
    --color-ink: #1e293b;
    --color-muted: #7c8493;
    --color-signal: #16a34a;
    --color-ember: #15803d;
    --color-viridian: #22c55e;

    --font-display: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-mono);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-signal); color: var(--color-paper); }

*::-webkit-scrollbar { width: 0.6em; height: 0.6em; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--color-signal); }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.live-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

#room-code-input.invalid { border-color: var(--color-ember) !important; }