/* ========================================
   GAMES BASE - Core Variables & Resets
   Unified foundation for all ESL Go games
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=SUSE:wght@400;600;700&display=swap');

/* ========================================
   1. CSS VARIABLES - Light Mode Default
   ======================================== */
:root {
    /* Primary Colors */
    --primary: #4ECDC4;
    --primary-dark: #45B7D1;
    --primary-light: #6EF3D6;
    
    /* Background Colors */
    --bg-primary: #f9fbfc;
    --bg-secondary: #e9ecef;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --page-bg: #f9fbfc;
    --main-bg: #ffffff;
    
    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-muted: #6c757d;
    
    /* Border & UI Colors */
    --border-color: #dee2e6;
    --header-border: #2f88ff;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --radius: 0.75rem;
    
    /* Fonts */
    --font-primary: 'Inter', sans-serif;
    --font-mono: 'SUSE', monospace;
    
    /* Theme Colors (can be overridden per game) */
    --theme-color: #34d399;
    --success-color: #4CAF50;
    --warning-color: #FF9800;
    --error-color: #F44336;
}

/* ========================================
   2. GLOBAL RESETS
   ======================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: var(--font-primary);
    background: var(--page-bg);
    color: var(--text-primary);
    overflow: hidden;
}

/* ========================================
   3. GAME OVERLAY CONTAINER
   ======================================== */
.game-overlay {
    position: fixed;
    inset: 0;
    background: var(--main-bg);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
}