/**
 * Variables CSS Globales - Wooden House
 * Paleta unificada: café madera sobre gris oscuro
 */

:root {
  /* === COLORES PRIMARIOS === */
  --color-primary:       #8b7355;   /* Café madera */
  --color-primary-hover: #a0865f;   /* Café madera claro (hover) */
  --color-primary-dark:  #6e5c42;   /* Café madera oscuro */
  --color-primary-light: rgba(139, 115, 85, 0.15);
  --color-accent:        #c9a96e;   /* Dorado claro (texto sobre primario) */

  /* === FONDOS === */
  --color-bg-main:  #1a1a1a;   /* Fondo general */
  --color-bg-panel: #2d2d2d;   /* Header, footer, paneles */
  --color-bg-card:  #2d2d2d;   /* Tarjetas / superficies */
  --color-bg-input: #3d3d3d;   /* Fondo de inputs */
  --color-border:   #3d3d3d;   /* Borde sutil */
  --color-border-light: #4a4a4a;

  /* === TEXTO === */
  --color-text-main:  #e0e0e0;   /* Texto principal */
  --color-text-muted: #a0a0a0;   /* Texto secundario */
  --color-text-dark:  #666666;   /* Texto deshabilitado / placeholder */

  /* === ESTADOS === */
  --color-success:    #4a9b5f;
  --color-success-bg: rgba(61, 107, 71, 0.15);
  --color-warning:    #c9a96e;
  --color-warning-bg: rgba(201, 169, 110, 0.15);
  --color-error:      #c44a4a;
  --color-error-bg:   rgba(139, 74, 74, 0.15);
  --color-info:       #4a8bc4;
  --color-info-bg:    rgba(74, 139, 196, 0.15);

  /* === TIPOGRAFÍA === */
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-base: 16px;
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-lg:   18px;
  --font-size-xl:   24px;
  --font-size-xxl:  36px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   600;
  --font-weight-black:  900;

  --line-height-base:  1.6;
  --line-height-tight: 1.2;

  /* === ESPACIADO === */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;

  /* === BORDES Y RADIOS === */
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 15px;
  --border-radius-xl: 20px;

  /* === SOMBRAS === */
  --shadow-sm:   0 2px 8px  rgba(0, 0, 0, 0.4);
  --shadow-md:   0 5px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-primary: 0 4px 16px rgba(139, 115, 85, 0.4);

  /* === TRANSICIONES === */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* === Z-INDEX === */
  --z-header:       1000;
  --z-modal:        2000;
  --z-notification: 3000;

  /* === BOOTSTRAP 5 OVERRIDES — Mapear colores de Bootstrap a la paleta Wooden House === */
  --bs-primary:           #8b7355;
  --bs-primary-rgb:       139, 115, 85;
  --bs-secondary:         #a0a0a0;
  --bs-secondary-rgb:     160, 160, 160;
  --bs-link-color:        #c9a96e;
  --bs-link-hover-color:  #8b7355;
  --bs-body-color:        #e0e0e0;
  --bs-body-color-rgb:    224, 224, 224;
  --bs-body-bg:           #1a1a1a;
  --bs-body-font-family:  'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --bs-body-line-height:  1.6;
  --bs-border-color:      #3d3d3d;
  --bs-border-radius:     10px;
  --bs-border-radius-sm:  8px;
  --bs-border-radius-lg:  15px;
  --bs-focus-ring-color:  rgba(139, 115, 85, 0.25);
}