/* Base styles - mobile-first approach (360px) */

:root {
    --bg: #2e3440;
    --bg-elevated: #3b4252;
    --bg-elevated-2: #434c5e;
    --bg-hover: #4c566a;
    --border: #4c566a;
    --text: #eceff4;
    --text-muted: #b7bfcc;
    --accent: #88c0d0;
    --accent-strong: #8fbcbb;
    --accent-contrast: #2e3440;
    --radius: 10px;
    --bg-deep: #1c2028;
    --accent-warm: #d08770;
    /* RGB triplets (no "#", no color function) so callers can drop them into rgba(var(--x-rgb), alpha)
       for a translucent tint without color-mix(), which some WebKit builds fail to paint as a
       gradient color stop despite advertising support via @supports. */
    --accent-rgb: 136, 192, 208;
    --accent-warm-rgb: 208, 135, 112;
    --font-display: "Orbitron", "Michroma", sans-serif;
}

html, body {
    background-color: var(--bg);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}