/* CSS Variables - Design Tokens */
/* Centralized design system for consistent styling across the application */

:root {
    /* Color Palette - Grays */
    --grey1-color: #111;
    --grey2-color: #2a2a2a;
    --grey22-color: #222;
    --grey23-color: #2f2f2f;
    --grey3-color: #333;
    --grey4-color: #444;
    --grey5-color: #555;
    --grey6-color: #666;
    --grey7-color: #777;
    --grey8-color: #888;
    --grey9-color: #999;
    --grey10-color: #aaa;
    --grey11-color: #bbb;
    --grey12-color: #ccc;
    --grey13-color: #ddd;
    --grey14-color: #eee;
    
    /* Color Palette - Greens */
    --green1-color: #81b64c;
    --green2-color: #6fa23e;
    --green3-color: #a3d160;
    --green4-color: #c1e17e;
    --green5-color: #769656;

    /* Background Colors */
    --background-color: var(--grey4-color);
    --content-bg-color: var(--grey3-color);
    --content-page-container-bg: var(--grey2-color);
    --nav-bg-color: var(--grey23-color);
    --nav-active-bg: #3a5a89;
    --nav-hover-bg: #444;
    --nav-button-primary: var(--green1-color);
    --nav-button-primary-hover: var(--green2-color);
    
    /* Text Colors */
    --text-color: white;
    --text-secondary-color: #bbb;
    --text-tertiary-color: #ccc;
    --text-light-color: #ddd;
    --content-text-color: #e8e8e8;
    --content-secondary-text: #bbb;
    
    /* Accent and Primary Colors */
    --accent-color: var(--green5-color);
    --primary-button-color: var(--green1-color);
    --primary-hover-color: var(--green3-color);
    --content-primary-color: var(--green1-color);
    --content-primary-hover: var(--green3-color);
    --content-link-color: var(--green3-color);
    --content-link-hover: var(--green4-color);
    
    /* Secondary Button Colors */
    --secondary-button-color: #555;
    --secondary-hover-color: #666;
    
    /* Border Colors */
    --border-color: #333;
    --content-border-color: #444;
    --content-highlight-bg: #3a3a3a;
    --content-highlight-border: var(--green1-color);
    
    /* Marble Colors */
    --black-marble-color: #333;
    --white-marble-color: #fff;
    
    /* Status Colors */
    --content-success-bg: #2a3a2a;
    --content-success-text: var(--green3-color);
    --content-warning-bg: #3a3a2a;
    --content-warning-text: #f0e68c;
    --content-danger-bg: #3a2a2a;
    --content-danger-text: #ff9999;
    --content-info-bg: #2a2a3a;
    --error-bg: rgba(255, 0, 0, 0.1);
    --error-border: #ff3333;

    /* Game Result Colors */
    --loss-color: #fa412d;
    --win-color: var(--green1-color);
    --draw-color: var(--grey6-color);
    
    /* Overlay and Transparent Colors */
    --overlay-dark-60: rgba(42, 42, 42, 0.6);
    --overlay-dark-80: rgba(42, 42, 42, 0.8);
    --overlay-grey-50: rgba(68, 68, 68, 0.5);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-black-10: rgba(0, 0, 0, 0.1);
    --overlay-black-15: rgba(0, 0, 0, 0.15);
    --overlay-black-20: rgba(0, 0, 0, 0.2);
    --overlay-black-30: rgba(0, 0, 0, 0.3);
    --overlay-black-40: rgba(0, 0, 0, 0.4);
    --overlay-black-50: rgba(0, 0, 0, 0.5);
    --glow-primary-40: rgba(129, 182, 76, 0.4);
    
    /* Spacing Scale */
    --spacing-xs: 0.25rem;
    --spacing-s: 0.5rem;
    --spacing-m: 1rem;
    --spacing-l: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Typography Scale */
    --font-size-xs: 0.75rem;
    --font-size-s: 0.875rem;
    --font-size-base: 1rem;
    --font-size-l: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 900;
    
    /* Line Heights */
    --line-height-tight: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Border Radius */
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 10px;
    --radius-xl: 12px;
    --radius-full: 50%;
    
    /* Shadows */
    --shadow-xs: 0 1px 3px var(--overlay-black-20);
    --shadow-s: 0 2px 4px var(--overlay-black-15);
    --shadow-m: 0 3px 6px var(--overlay-black-20);
    --shadow-l: 0 4px 6px var(--overlay-black-20);
    --shadow-xl: 0 8px 24px var(--overlay-black-30);
    --shadow-2xl: 0 20px 60px var(--overlay-black-50);
    --shadow-modal: 0 .3rem .63rem .07rem var(--overlay-black-40);
    --shadow-nav: 2px 0 5px var(--overlay-black-20);
    --shadow-mobile-header: 0 2px 4px var(--overlay-black-20);
    --shadow-glow-s: 0 4px 8px var(--overlay-black-15);
    --shadow-glow-m: 0 4px 12px var(--glow-primary-40);
    --shadow-glow-l: 0 5px 15px var(--overlay-black-20);
    --shadow-glow-xl: 0 8px 32px var(--overlay-black-40);
    
    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-modal-overlay: 1000;
    --z-modal: 1001;
    --z-language-dropdown: 10000;
}