/* 
 * Variáveis customizadas do projeto
 * Arquivo: assets/css/variables-fe.css
 */

:root {
    /* ===== TIPOGRAFIA ===== */
    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --line-height-base: 1.5;
    --line-height-sm: 1.25;
    --line-height-lg: 1.8;

    /* ===== ESPAÇAMENTOS ===== */
    --spacing-1: 0.25rem;    /* 4px */
    --spacing-2: 0.5rem;     /* 8px */
    --spacing-3: 1rem;       /* 16px */
    --spacing-4: 1.5rem;     /* 24px */
    --spacing-5: 2rem;       /* 32px */
    --spacing-6: 3rem;       /* 48px */
    
    /* Padding padrão para componentes */
    --padding-card: 1.25rem;
    --padding-button: 0.5rem 1rem;
    --padding-input: 0.625rem 0.75rem;
    
    /* Margin padrão para componentes */
    --margin-component: 1.25rem;
    
    /* ===== BORDAS E SOMBRAS ===== */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    --border-radius-pill: 50rem;
    --border-radius-circle: 50%;
    
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-chess: 5px;
    
    --box-shadow-sm: 0 2px 4px rgba(0,0,0,0.15);
    --box-shadow-md: 0 4px 6px rgba(0,0,0,0.2);
    --box-shadow-lg: 0 10px 20px rgba(0,0,0,0.2);
    --box-shadow-xl: 0 15px 30px rgba(0,0,0,0.3);
    --box-shadow-inset: inset 0 0 0 3px;
    
    /* ===== TRANSIÇÕES ===== */
    --transition-base: all 0.2s ease-in-out;
    --transition-slow: all 0.3s ease-in-out;
    --transition-fast: all 0.1s ease-in-out;
    --transition-pieces: all 0.3s ease-out;

    /* ===== MENU FLUTUANTE ===== */
    --floating-menu-size: 50px;
    --floating-menu-bg: var(--bs-primary);
    --floating-menu-shadow: 0 4px 12px rgba(0,0,0,0.3);
    --floating-menu-top: 20px;
    --floating-menu-right: 20px;
    --floating-menu-z-index: 1060;
    
    /* ===== CORES ESPECÍFICAS DO XADREZ ===== */
    --chess-light-square: #b0b0b0;  /* casas claras (tema dark) */
    --chess-dark-square: #5a5a5a;   /* casas escuras (tema dark) */
    --chess-highlight: #ffff00;     /* movimento válido */
    --chess-selected: #20b2aa;      /* peça selecionada */
    --chess-check: #ff4444;         /* xeque */
    --chess-border: #333333;        /* borda do tabuleiro (tema dark) */
    
    /* ===== CORES PERSONALIZADAS DO TEMA DARK ===== */
    --bs-primary: #375a7f;
    --bs-primary-rgb: 55, 90, 127;
    --bs-primary-hover: #2a4764;
    
    --bs-secondary: #626262;
    --bs-secondary-rgb: 98, 98, 98;
    --bs-secondary-hover: #515151;
    
    --bs-success: #00bc8c;
    --bs-success-rgb: 0, 188, 140;
    --bs-success-hover: #009670;
    
    --bs-info: #3498db;
    --bs-info-rgb: 52, 152, 219;
    --bs-info-hover: #2980b9;
    
    --bs-warning: #f39c12;
    --bs-warning-rgb: 243, 156, 18;
    --bs-warning-hover: #e08e0b;
    
    --bs-danger: #e74c3c;
    --bs-danger-rgb: 231, 76, 60;
    --bs-danger-hover: #d62c1a;
    
    --bs-light: #303030;
    --bs-light-rgb: 48, 48, 48;
    --bs-light-hover: #3a3a3a;
    
    --bs-dark: #222222;
    --bs-dark-rgb: 34, 34, 34;
    --bs-dark-hover: #1a1a1a;
    
    /* Cores personalizadas adicionais */
    --bs-purple: #6f42c1;
    --bs-purple-rgb: 111, 66, 193;
    --bs-purple-hover: #5a35a0;
    
    --bs-orange: #fd7e14;
    --bs-orange-rgb: 253, 126, 20;
    --bs-orange-hover: #e56a02;
    
    --bs-teal: #20c997;
    --bs-teal-rgb: 32, 201, 151;
    --bs-teal-hover: #18a37c;
    
    --bs-white: #ffffff;
    --bs-white-rgb: 255, 255, 255;
    
    --bs-black: #000000;
    --bs-black-rgb: 0, 0, 0;
    
    /* ===== CORES DE TEXTO E FUNDO PARA TEMA DARK ===== */
    --bs-body-color: #ececec;
    --bs-body-color-rgb: 236, 236, 236;
    --bs-body-bg: #121212;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-card-bg: #222222;
    --bs-card-border-color: #2c2c2c;
    --bs-border-color: #2c2c2c;
    --bs-text-muted: #adb5bd;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    
    /* ===== CORES DE FORMULÁRIOS ===== */
    --input-bg: #2c2c2c;
    --input-border: var(--bs-border-color);
    --input-focus-border: var(--bs-primary);
    --input-focus-shadow: 0 0 0 0.25rem rgba(55, 90, 127, 0.25);
    
    /* ===== GRID E LAYOUT ===== */
    --container-padding: 20px;
    --grid-gap: 20px;
    --sidebar-width: 300px;
    --button-equal-width: 140px;
    --logo-overlay-offset: -40px;
    --progress-height: 0.8rem;
    
    /* ===== BACKGROUND PATTERN ===== */
    --pattern-color: rgba(34, 34, 34, 0.5);
    --pattern-size: 80px;
    --pattern-position-offset: 40px;
    
    /* ===== TRANSFORMAÇÕES ===== */
    --scale-sm: scale(0.9);
    --scale-md: scale(1.0);
    --scale-lg: scale(1.15);
    --scale-xl: scale(1.2);
    --translateY-sm: translateY(-1px);
    --translateY-md: translateY(-2px);
    --translateY-lg: translateY(-3px);
    --translateY-xl: translateY(-5px);
    
    /* ===== CHESS BOARD PATTERN ===== */
    --chess-pattern-size: 20px;
    --chess-pattern-light-opacity: 0.1;
}