/* Variáveis CSS customizadas para o projeto BChess */

:root {
    /* Cores principais do projeto */
    --bchess-primary: #2c3e50;
    --bchess-secondary: #34495e;
    --bchess-accent: #e74c3c;
    --bchess-light: #ecf0f1;
    --bchess-dark: #2c3e50;
    --bchess-success: #2ecc71;
    --bchess-warning: #f39c12;
    --bchess-danger: #e74c3c;
    --bchess-info: #3498db;
    
    /* Cores específicas do xadrez */
    --chess-light-square: #f0d9b5;  /* casas claras */
    --chess-dark-square: #e4b894;   /* casas escuras */
    --chess-highlight: #ffff00;     /* movimento válido */
    --chess-selected: #20b2aa;      /* peça selecionada */
    --chess-check: #ff4444;         /* xeque */
    --chess-border: #8b4513;        /* borda do tabuleiro */
    
    /* Background quadriculado do site */
    --bg-checker-size: 50px;        /* tamanho de cada quadrado */
    --bg-checker-light: #dbd8d6;    /* cor clara do quadriculado - mais escura */
    --bg-checker-dark: #5a5654;     /* cor escura do quadriculado - mais escura */
    --bg-checker-opacity: 0.4;      /* opacidade do background (aumentada para ser mais visível) */
    
    /* Menu flutuante */
    --floating-menu-size: 70px;
    --floating-menu-size-mobile: 56px;
    --floating-menu-bg: var(--bchess-primary);
    --floating-menu-shadow: 0 4px 12px rgba(0,0,0,0.15);
    --floating-menu-top: 10px;
    --floating-menu-right: 20px;
    --floating-menu-z-index: 1060;
    --floating-menu-height: 60px;
    --content-margin-top: 28px;
    
    /* Espaçamentos padrão - REDUZIDOS */
    --spacing-xs: 0.125rem;  /* 2px */
    --spacing-sm: 0.25rem;   /* 4px */
    --spacing-md: 0.5rem;    /* 8px */
    --spacing-lg: 0.75rem;   /* 12px */
    --spacing-xl: 1rem;      /* 16px */
    --spacing-xxl: 1.5rem;   /* 24px */
    
    /* Margens - REDUZIDAS */
    --margin-xs: var(--spacing-xs);
    --margin-sm: var(--spacing-sm);
    --margin-md: var(--spacing-md);
    --margin-lg: var(--spacing-lg);
    --margin-xl: var(--spacing-xl);
    --margin-xxl: var(--spacing-xxl);
    
    /* Paddings - REDUZIDOS */
    --padding-xs: var(--spacing-xs);
    --padding-sm: var(--spacing-sm);
    --padding-md: var(--spacing-md);
    --padding-lg: var(--spacing-lg);
    --padding-xl: var(--spacing-xl);
    --padding-xxl: var(--spacing-xxl);
    
    /* Gaps - REDUZIDOS */
    --gap-xs: var(--spacing-xs);
    --gap-sm: var(--spacing-sm);
    --gap-md: var(--spacing-md);
    --gap-lg: var(--spacing-lg);
    --gap-xl: var(--spacing-xl);
    
    /* Bordas e arredondamentos */
    --border-width-default: 1px;
    --border-width-thick: 2px;
    --border-radius-sm: 0.25rem;    /* 4px */
    --border-radius-md: 0.5rem;     /* 8px */
    --border-radius-lg: 0.75rem;    /* 12px */
    --border-radius-xl: 1rem;       /* 16px */
    --border-radius-pill: 50rem;    /* Arredondado como pílula */
    --border-radius-circle: 50%;    /* Círculo perfeito */
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.1);
    --shadow-xl: 0 16px 24px rgba(0,0,0,0.1);
    --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.1);
    --shadow-focus: 0 0 0 0.25rem rgba(44, 62, 80, 0.25);
    
    /* Tipografia */
    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-xxl: 1.5rem;    /* 24px */
    --font-size-xxxl: 2rem;     /* 32px */
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-loose: 1.75;
    
    /* Transições e animações */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 500ms;
    --transition-timing: ease-in-out;
    
    /* Z-index */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-floating: 1060;
    --z-index-tooltip: 1070;
    
    /* Tamanhos de componentes - REDUZIDOS */
    --card-border-radius: var(--border-radius-md);
    --card-shadow: var(--shadow-md);
    --card-header-padding: var(--padding-sm);
    --card-body-padding: var(--padding-md);
    --card-footer-padding: var(--padding-sm);
    
    --btn-padding-y: 0.25rem;
    --btn-padding-x: 0.5rem;
    --btn-font-size: var(--font-size-md);
    --btn-border-radius: var(--border-radius-sm);
    --btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    
    --input-padding-y: 0.25rem;
    --input-padding-x: 0.5rem;
    --input-border-width: var(--border-width-default);
    --input-border-radius: var(--border-radius-sm);
    --input-focus-shadow: var(--shadow-focus);
    
    /* Layout específico do BChess */
    --chess-board-size: 80vh;
    --chess-board-size-mobile: 60vh;
    --chess-board-border-width: 10px;
    
    --sidebar-width: 300px;
    --sidebar-width-mobile: 100%;
    
    --header-height: 60px;
    --footer-height: 60px;
    
    /* Breakpoints (mesmos do Bootstrap para consistência) */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* Cores para cards gradientes */
    --card-blue-gradient-start: #667eea;
    --card-blue-gradient-end: #764ba2;
    --card-green-gradient-start: #11998e;
    --card-green-gradient-end: #38ef7d;
    --card-purple-gradient-start: #8e2de2;
    --card-purple-gradient-end: #4a00e0;
    --card-orange-gradient-start: #f093fb;
    --card-orange-gradient-end: #f5576c;
    --card-red-gradient-start: #ff6b6b;
    --card-red-gradient-end: #ee5a24;
    --card-teal-gradient-start: #4facfe;
    --card-teal-gradient-end: #00f2fe;
    
    /* Cores adicionais para elementos específicos */
    --btn-chess-accent-hover: #c0392b;
    --menu-notification-icon: #ff6b35;
    --menu-avatar-border-color: #ccc;
    --menu-avatar-background: #fff;
    --auth-bg-pattern-color: rgba(0,0,0,0.03);
    --auth-bg-pattern-size: 20px;
    --bet-card-border-active: #28a745;
    --bet-card-bg-active: #f8fff9;
    --bet-card-border-finished: #6c757d;
    --bet-card-bg-finished: #f8f9fa;
    
    /* Tamanhos específicos */
    --chess-logo-size: 80px;
    --chess-logo-size-mobile: 60px;
    --player-avatar-size: 40px;
    --bet-player-avatar-size: 24px;
    --menu-avatar-border-width: 3px;
    --betting-panel-max-height: 400px;
    --betting-panel-max-height-mobile: 300px;
    --auth-card-hover-transform: -3px;
    --card-chess-hover-transform: -2px;
    --btn-hover-transform: -2px;
    --chess-card-small-height: 130px;
    --chess-card-small-height-mobile: 110px;
    --chess-card-small-height-sm: 100px;
    --game-layout-gap: 20px;
    --game-layout-panel-width: 300px;
    
    /* Tema Light (padrão) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #0d5e0d;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-text: #495057;
    --table-bg: #ffffff;
    --table-border: #dee2e6;
    --table-dark-text: #222222;
    --nav-bg: #ffffff;
    --nav-border: #dee2e6;
    --dropdown-bg: #ffffff;
    --dropdown-border: #dee2e6;
    --modal-bg: #ffffff;
    --modal-border: #dee2e6;
    --tooltip-bg: #212529;
    --tooltip-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --container-max-width: 1200px;
    --home-cards-min-height: 600px;
    --auth-card-max-width: 400px;
    --center-logo-max-width: 700px;
    --center-logo-min-width: 120px;
    --chess-card-small-width: 280px;
    --chess-card-small-width-mobile: 200px;
    --chess-card-small-width-sm: 160px;
    --action-button-size: 32px;
    --badge-padding-y: 0.25em;
    --badge-padding-x: 0.75em;
    --bchess-success-hover: #27ae60;
    --bchess-danger-hover: #c0392b;
    --bchess-warning-hover: #e67e22;
    --menu-dropdown-width: 280px;
    --achievement-icon-size: 48px;
    --friend-avatar-size: 40px;
    --friend-avatar-status-size: 12px;
    --friend-avatar-status-border-width: 2px;
    --btn-padding-xl: 0.75rem;
    --btn-padding-xxl: 1.5rem;
    --menu-avatar-border-width: 2px;
    --profile-avatar-size: 120px;
    --profile-avatar-border-width: 4px;
    --wallet-balance-font-size: 3rem;
    --wallet-balance-max-width: 400px;
    --center-logo-width: 90%;
    --center-logo-width-md: 180px;
    --center-logo-width-sm: 120px;
    --pagination-item-padding-y: 0.5em;
    --pagination-item-padding-x: 1em;
    
    /* Novas variáveis para valores que estavam fixos */
    --home-container-max-width: 1200px;
    --home-cards-grid-minmax: 300px;
    --home-stats-grid-minmax: 200px;
    --game-container-max-width: 1400px;
    --game-moves-max-height: 300px;
    --lobby-container-max-width: 1200px;
    --lobby-games-grid-minmax: 350px;
    --lobby-player-avatar-size: 30px;
    --profile-avatar-edit-size: 32px;
    --tournaments-container-max-width: 1200px;
    --tournaments-grid-minmax: 350px;
    --betting-container-max-width: 1200px;
    --wallet-container-max-width: 1200px;
    --loading-spinner-min-height: 200px;
    --loading-spinner-size: 48px;
    --loading-spinner-border-width: 4px;
    --server-error-max-width: 400px;
    --game-iframe-min-height: 500px;
    --home-main-min-height: 100vh;
    --home-cards-min-height-desktop: 600px;
    --home-container-max-width-large: 1400px;
    --home-container-max-width-mobile: 98vw;
    --home-container-max-width-small: 100vw;
    --home-cards-breakpoint: 900px;
    --home-cards-breakpoint-small: 600px;
    --pagination-gap: 0.5rem;
    --form-select-arrow-size: 16px 12px;
    --form-select-arrow-position: right 0.75rem center;
    --divider-height: 1px;
    --btn-hover-transform-y: -2px;
    --menu-dropdown-transform-y: -10px;
    --chess-piece-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    --chess-piece-shadow-hover: 3px 3px 6px rgba(0,0,0,0.4);
    --menu-dropdown-min-width: 220px;
    --menu-dropdown-min-width-mobile: 180px;
    --menu-dropdown-width-mobile: 250px;
    --chess-logo-max-width-mobile: 60px;
    --form-invalid-shadow: 0 0 0 0.25rem rgba(231, 76, 60, 0.25);
    --form-valid-shadow: 0 0 0 0.25rem rgba(46, 204, 113, 0.25);
    --btn-padding-small: 0.25rem 0.5rem;
    --menu-dropdown-margin-left: -1px;
    --chess-board-filter-shadow: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
    --chess-board-filter-shadow-hover: drop-shadow(3px 3px 6px rgba(0,0,0,0.4));
    --checkerboard-pattern-25: 25%;
    --checkerboard-pattern-75: 75%;
    --checkerboard-pattern-45deg: 45deg;
    --checkerboard-pattern-neg45deg: -45deg;
    --progress-bar-height: 8px;
    --scrollbar-width: 8px;
    --friends-search-max-width: 300px;
    --border-bottom-width: 1px;
    --border-top-width: 1px;
    --border-bottom-thick: 2px;
    --border-bottom-thicker: 3px;
    --menu-dropdown-min-width-desktop: 220px;
    --border-bottom-width: 1px;
    --border-top-width: 1px;
    --border-bottom-thick: 2px;
    --border-bottom-thicker: 3px;
    --card-margin-left: 24px;
    --nav-link-active-yellow: #ffd600;
    
    /* Cores dos temas do tabuleiro de xadrez */
    --chess-board-classic-light: #f0d9b5;
    --chess-board-classic-dark: #b58863;
    --chess-board-green-light: #eeeed2;
    --chess-board-green-dark: #769656;
    --chess-board-blue-light: #dee3e6;
    --chess-board-blue-dark: #8ca2ad;
    --chess-board-gray-light: #e6e6e6;
    --chess-board-gray-dark: #7d7d7d;
}

/* Tema Dark */
[data-theme="dark"] {
    /* Cores principais do projeto - ajustadas para tema escuro */
    --bchess-primary: #3498db;
    --bchess-secondary: #5a6c7d;
    --bchess-accent: #e74c3c;
    --bchess-light: #ecf0f1;
    --bchess-dark: #2c3e50;
    --bchess-success: #2ecc71;
    --bchess-warning: #f39c12;
    --bchess-danger: #e74c3c;
    --bchess-info: #3498db;
    
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #00ff00;
    --border-color: #404040;
    --card-bg: #2d2d2d;
    --card-border: #404040;
    --input-bg: #404040;
    --input-border: #555555;
    --input-text: #ffffff;
    --table-bg: #2d2d2d;
    --table-border: #404040;
    --table-dark-text: #222222;
    --nav-bg: #2d2d2d;
    --nav-border: #404040;
    --dropdown-bg: #2d2d2d;
    --dropdown-border: #404040;
    --modal-bg: #2d2d2d;
    --modal-border: #404040;
    --tooltip-bg: #ffffff;
    --tooltip-text: #212529;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --overlay-bg: rgba(0, 0, 0, 0.7);
    
    /* Cores específicas para texto no tema escuro - MELHORADAS */
    --text-on-primary: #ffffff;
    --text-on-secondary: #ffffff;
    --text-on-success: #ffffff;
    --text-on-warning: #212529;
    --text-on-danger: #ffffff;
    --text-on-info: #ffffff;
    --text-on-accent: #ffffff;
    --text-on-primary-strong: #fff;
    
    /* Cores de fundo ajustadas para melhor contraste */
    --btn-primary-bg: #3498db;
    --btn-primary-hover: #2980b9;
    --btn-secondary-bg: #95a5a6;
    --btn-secondary-hover: #7f8c8d;
    --btn-success-bg: #27ae60;
    --btn-success-hover: #229954;
    --btn-danger-bg: #e74c3c;
    --btn-danger-hover: #c0392b;
    --btn-warning-bg: #f39c12;
    --btn-warning-hover: #e67e22;
    --btn-info-bg: #3498db;
    --btn-info-hover: #2980b9;
    --nav-link-active-yellow: #ffd600;
}