/* ═══════════════════════════════════════════════════════════
   INFINITE CRAPS - BASE STYLES
   Reset, Typography, Colors, Utilities
   ═══════════════════════════════════════════════════════════ */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
    color: #e8e0d0;
    min-height: 100vh;
    overflow-y: auto;
}

/* Color Variables — DESIGN TOKENS */
:root {
    /* Palette */
    --gold: #ffd700;
    --gold-dim: rgba(255, 215, 0, 0.5);
    --gold-faint: rgba(255, 215, 0, 0.15);
    --green: #4caf50;
    --green-dim: rgba(76, 175, 80, 0.5);
    --red: #ef5350;
    --red-dim: rgba(239, 83, 80, 0.5);
    --purple: rgba(180, 140, 255, 0.8);
    --purple-dim: rgba(180, 140, 255, 0.35);

    /* Text */
    --text: #e8e0d0;
    --text-bright: rgba(230, 220, 200, 0.8);
    --text-mid: rgba(200, 195, 170, 0.5);
    --text-dim: rgba(200, 195, 170, 0.3);

    /* Surfaces */
    --felt-green-dark: #0a3d0a;
    --felt-green-medium: #0d260d;
    --felt-green-light: #082d08;
    --border: rgba(139, 115, 85, 0.35);
    --border-light: rgba(139, 115, 85, 0.15);
    --bg-dark: #1a0f0a;
    --bg-cell: rgba(15, 10, 8, 0.85);

    /* Fonts */
    --font-display: 'Anton', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --font-size-xs: 7px;
    --font-size-sm: 9px;
    --font-size-md: 11px;
    --font-size-lg: 14px;
    --font-size-xl: 18px;
    --font-size-hero: 24px;
}

/* Typography Scale */
h1, h2, h3 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}