/* ==========================================================================
   HelixWin — Design Tokens / CSS Custom Properties
   Mobile-first (375px base) · Game Theme · Helix Jump Style
   ========================================================================== */

:root {
    /* ── Background — blue sky/water gradient ────────────────────────────── */
    --bg-game: linear-gradient(180deg, #87CEEB 0%, #5DADE2 30%, #2980B9 60%, #1a5276 100%);
    --bg-game-solid: #2980B9;
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-dark: rgba(0, 0, 0, 0.3);
    --bg-input: rgba(0, 0, 0, 0.08);

    /* ── Red (primary action) — matches Helix Jump logo ─────────────────── */
    --orange: #E63946;
    --orange-light: #EF5350;
    --orange-gradient: linear-gradient(180deg, #EF5350 0%, #E63946 40%, #C62828 100%);
    --orange-shadow: 0 6px 0 #B71C1C, 0 8px 20px rgba(230, 57, 70, 0.4);
    --orange-shadow-pressed: 0 2px 0 #B71C1C, 0 3px 10px rgba(230, 57, 70, 0.3);

    /* ── Colors ──────────────────────────────────────────────────────────── */
    --green: #2ECC71;
    --green-dark: #27AE60;
    --red: #E74C3C;
    --gold: #FFD700;
    --blue-light: #5DADE2;
    --white: #FFFFFF;
    --gray-100: #F8F9FA;
    --gray-400: #CED4DA;
    --gray-500: #ADB5BD;

    /* ── Text ────────────────────────────────────────────────────────────── */
    --text-light: #FFFFFF;
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-card: #333333;
    --text-card-muted: #777777;

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --border-light: rgba(255, 255, 255, 0.2);
    --border-card: rgba(0, 0, 0, 0.1);

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* ── Radius ──────────────────────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* ── Typography ──────────────────────────────────────────────────────── */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition-fast: 0.15s ease;
}