/* ==========================================================================
   Cascade Slots - Base Stylesheet
   CSS Custom Properties (Design Tokens) & Base Resets
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Colors - Base */
    --color-bg-primary: #0B102B;
    --color-bg-secondary: #0f1115;
    --color-bg-tertiary: #1a1d24;
    --color-bg-input: #23262e;
    --color-border: #2a2d35;
    --color-border-hover: #374151;

    /* Colors - Semantic */
    --color-header: #070B24;
    --color-sidebar: #121731;
    --color-game-bg: #070B24;
    --color-spin-btn: #4559FF;
    --color-spin-btn-hover: #5a6cff;
    --color-bet-input: #181E3C;
    --color-bet-text: #767FAA;
    --color-bonus-btn: #343C64;
    --color-bonus-btn-hover: #3d4570;
    --color-header-btn: #1F2546;

    --color-text-primary: #ffffff;
    --color-text-secondary: #e5e7eb;
    --color-text-muted: #9ca3af;
    --color-text-disabled: #6b7280;
    --color-text-placeholder: #4b5563;

    /* Provably Fair specific colors */
    --color-pf-label: #767FAA;
    --color-pf-input-text: #9AA1C0;
    --color-pf-input-bg: #0F132A;

    --color-accent: #2B63F4;
    --color-accent-hover: #3d72f5;
    --color-success: #22c55e;
    --color-success-hover: #16a34a;
    --color-multiplier: #8B5CF6;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

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

    /* Layout */
    --header-height: 60px;
    --sidebar-width: clamp(280px, 30vw, 380px);
    --max-container-width: 1400px;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: #0B102B;
    min-height: 100vh;
    color: var(--color-text-primary);
}