/**
 * Definición de Colores Corporativos de Ziklo Solar
 *
 * Define variables CSS con la paleta de colores oficial basada en el manual de marca.
 * Incluye colores primarios del logo, paleta extendida, mapeo semántico y overrides de Bootstrap.
 *
 * Variables principales:
 * - --ziklo-orange: Color naranja principal de la marca (#ED8E20)
 * - --ziklo-gray: Color gris del texto del logo (#666666)
 * - Variables semánticas: --primary-color, --text-primary, --bg-white, etc.
 *
 * Sobrescribe clases de Bootstrap (.btn-primary, .bg-primary, .text-primary, etc.)
 * para aplicar la paleta corporativa en todos los componentes.
 */
:root {
  /* Primary Brand Colors - Logo Colors */
  --ziklo-gray: #666666;           /* Logo text color (K:60%) */
  --ziklo-orange: #ED8E20;         /* Main brand orange (C:7% M:44% Y:98%) */
  --ziklo-yellow-light: #F4D670;   /* Light yellow (C:6% M:14% Y:80%) */
  --ziklo-beige: #F5D9B8;          /* Beige/Cream (C:3% M:25% Y:80%) */

  /* Extended Brand Palette */
  --ziklo-black: #0D0D0D;          /* Deep black (C:84% M:83% Y:73% K:80%) */
  --ziklo-gray-medium: #7D8B8B;    /* Medium gray (C:58% M:47% Y:47%) */
  --ziklo-gray-light: #B6CAD2;     /* Light gray/blue (C:35% M:19% Y:20%) */
  --ziklo-green-dark: #1D2E1C;     /* Dark green (C:80% M:72% Y:80% K:47%) */
  --ziklo-orange-dark: #9A3C0D;    /* Dark orange (C:38% M:80% Y:98% K:6%) */
  --ziklo-yellow: #F4CE5C;         /* Yellow (C:6% M:21% Y:72%) */
  --ziklo-beige-light: #F3D9D0;    /* Very light beige (C:5% M:19% Y:22%) */
  --ziklo-white: #FFFFFF;          /* Pure white */

  /* Semantic Color Mapping */
  --primary-color: var(--ziklo-orange);
  --primary-text: var(--ziklo-gray);
  --secondary-color: var(--ziklo-yellow);
  --accent-color: var(--ziklo-orange-dark);

  /* Backgrounds */
  --bg-white: var(--ziklo-white);
  --bg-light: var(--ziklo-beige-light);
  --bg-gray-light: #F8F9FA;

  /* Text Colors */
  --text-primary: var(--ziklo-gray);
  --text-secondary: var(--ziklo-gray-medium);
  --text-muted: #999999;

  /* Legacy compatibility (deprecated - use ziklo- prefix) */
  --primary-orange: var(--ziklo-orange);
  --color-white: var(--ziklo-white);
  --color-black: var(--ziklo-black);
  --color-gray: var(--ziklo-gray);
  --color-text-gray: var(--ziklo-gray-medium);
}

/* Bootstrap Override Classes */
.btn-primary {
  background: var(--ziklo-orange);
  border-color: var(--ziklo-orange);
  color: var(--ziklo-white);
}

.btn-primary:hover {
  background: var(--ziklo-orange-dark);
  border-color: var(--ziklo-orange-dark);
  color: var(--ziklo-white);
}

.btn-secondary {
  background: var(--ziklo-gray);
  border-color: var(--ziklo-gray);
  color: var(--ziklo-white);
}

.btn-secondary:hover {
  background: var(--ziklo-gray-medium);
  border-color: var(--ziklo-gray-medium);
  color: var(--ziklo-white);
}

.bg-primary {
  background: var(--ziklo-orange) !important;
}

.bg-light {
  background: var(--bg-light) !important;
}

.bg-white {
  background: var(--bg-white) !important;
}

.text-primary {
  color: var(--ziklo-orange) !important;
}

.text-secondary {
  color: var(--ziklo-gray) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.border-primary {
  border-color: var(--ziklo-orange) !important;
}