/* ===================================
   VARIABLES DE COLORES - TLAXCALA
   Manual de Marca: Una Nueva Historia (2021-2027)
   Actualizado: Enero 2026
   =================================== */

:root {
  /* === COLORES PRINCIPALES - PALETA OFICIAL === */

  /* Vino Institucional - Color principal */
  --color-header-bg: #6B1233;
  --color-header-text: #FFFFFF;
  --color-header-text-secondary: rgba(255, 255, 255, 0.8);

  /* Botones Primarios - Vino Institucional */
  --color-btn-primary: #6B1233;
  --color-btn-primary-hover: #8A1D3E;

  /* Botones Secundarios - Vino */
  --color-btn-secondary: #6B1233;
  --color-btn-secondary-hover: #551029;

  /* Acentos para interactividad */
  --color-accent-magenta: #6B1233;
  --color-accent-magenta-hover: #8A1D3E;

  /* Colores por Tema */
  --color-theme-vulnerabilidad: #6B1233;
  --color-theme-riesgo: #C6A86A;
  --color-theme-amenazas: #6B1233;
  --color-theme-impactos: #6B1233;

  /* Títulos y Textos */
  --color-title-purple: #6B1233;
  --color-title-purple-dark: #551029;
  --color-text-dark: #2D2D2D;
  --color-text-gray: #666666;
  --color-text-light: #999999;

  /* Dorado Institucional - Acentos */
  --color-beige: #C6A86A;
  --color-beige-light: #D4BC8A;
  --color-gold: #C6A86A;
  --color-gold-dark: #A8905A;
  --color-gold-light: #D4BC8A;

  /* === FONDOS === */

  --color-bg-white: #FFFFFF;
  --color-bg-light: #FAFAFA;
  --color-bg-gray: #F5F5F5;
  --color-bg-gray-light: #F8F9FA;
  --color-bg-beige: #F5F3E5;

  /* === GRISES NEUTROS === */

  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #F0F0F0;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #CCCCCC;
  --color-gray-500: #AAAAAA;
  --color-gray-600: #888888;
  --color-gray-700: #777777;
  --color-gray-800: #555555;
  --color-gray-900: #333333;

  /* === BORDES Y SOMBRAS === */

  --color-border: #DDDDDD;
  --color-border-light: #E8E8E8;
  --color-border-dark: #CCCCCC;
  --color-shadow-sm: rgba(0, 0, 0, 0.08);
  --color-shadow-md: rgba(0, 0, 0, 0.1);
  --color-shadow-lg: rgba(0, 0, 0, 0.15);

  /* === ESTADOS === */

  --color-success: #76BC21;
  --color-success-alt: #4CAF50;
  --color-success-dark: #2E7D32;
  --color-warning: #C6A86A;
  --color-warning-orange: #FF9800;
  --color-warning-orange-dark: #F57C00;
  --color-error: #6B1233;
  --color-error-red: #F44336;
  --color-error-dark: #C62828;
  --color-info: #6B1233;
  --color-info-blue: #2196F3;
  --color-info-blue-dark: #1565C0;

  /* === COLORES DE DATOS Y GRÁFICOS === */

  --color-chart-primary: #6B1233;
  --color-chart-secondary: #6B1233;
  --color-chart-tertiary: #C6A86A;
  --color-chart-quaternary: #2D2D2D;
  --color-chart-quinternary: #D4BC8A;

  --color-data-blue: #4A90E2;
  --color-data-blue-dark: #3576B9;
  --color-data-green: #4CAF50;
  --color-data-orange: #FF9800;

  /* === COLORES POR SECTOR (ACCIONES CLIMÁTICAS) === */

  --color-sector-agua: #4A90E2;
  --color-sector-ambiente: #76BC21;
  --color-sector-rural: #8B6F47;
  --color-sector-obras: #C6A86A;
  --color-sector-economico: #6B1233;

  /* === COLORES PARA MAPAS Y UI === */

  --color-purple-ui: #5E3B8C;
  --color-purple-leaflet: #9C27B0;
  --color-purple-active: #7B1FA2;

  /* === ESCALAS DE DEGRADACIÓN (SUELO) === */

  --color-scale-critical: #8B0000;
  --color-scale-high: #CD5C5C;
  --color-scale-medium: #F0E68C;
  --color-scale-low: #90EE90;
  --color-scale-minimal: #228B22;

  /* === ESCALAS DE RIESGO === */

  --color-risk-low: #FFFF99;
  --color-risk-medium: #FFA500;
  --color-risk-high: #FF0000;

  /* === COLORES ESPECIALES === */

  --color-highlight-yellow: #FFF8E1;
  --color-highlight-orange: #FFF3E0;
  --color-pink-error: #E11D48;
  --color-pink-error-bg: #FEE2E2;
  --color-highlight-blue: #F0F7FF;
  --color-neutral-gray: #9E9E9E;
  --color-black: #000000;
  --color-dark-ui: #1A1A2E;
  --color-dark-bg: #2A2A2A;
  --color-dark-surface: #444444;

  /* Gradientes de temperatura */
  --color-temp-hot: #E65100;
  --color-temp-hot-dark: #BF360C;

  /* Gradientes de estrategias */
  --color-strategy-blue-light: #E3F2FD;
  --color-strategy-blue: #BBDEFB;
  --color-strategy-green-light: #E8F5E9;
  --color-strategy-green: #C8E6C9;
  --color-strategy-orange-light: #FFF3E0;
  --color-strategy-orange: #FFE0B2;
  --color-strategy-pink-light: #FCE4EC;
  --color-strategy-pink: #F8BBD9;

  /* Iconos especiales */
  --color-icon-disabled: #D0D0D0;

  /* === ESPACIADO === */

  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;

  /* === BORDER RADIUS === */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* === TRANSICIONES === */

  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* === TEMA OSCURO (OPCIONAL PARA FUTURO) === */

[data-theme="dark"] {
  --color-bg-white: #1E1E1E;
  --color-bg-light: #2A2A2A;
  --color-bg-gray: #333333;
  --color-text-dark: #FFFFFF;
  --color-text-gray: #CCCCCC;
  --color-border: #444444;
}