/**
 * Variables CSS - Colores Institucionales PROFECO
 * Basado en la guía oficial de identidad institucional
 * Archivo: colores institucionales.png
 */
@charset "UTF-8";
:root {
  /* Colores Institucionales Oficiales PROFECO */

  /* Negro Institucional - PANTONE Neutral Black C */
  --color-negro: #161a1d;
  --color-negro-rgb: 22, 26, 29;

  /* Guinda Primario - PANTONE 7420 C */
  --color-guinda: #9b2247;
  --color-guinda-rgb: 155, 34, 71;

  /* Dorado - PANTONE 1255 C */
  --color-dorado: #a57f2c;
  --color-dorado-rgb: 165, 127, 44;

  /* Gris - PANTONE Cool Gray 7 C */
  --color-gris: #555555;
  --color-gris-rgb: 152, 152, 154;

  /* Guinda Oscuro - PANTONE 7421 C */
  --color-guinda-oscuro: #611232;
  --color-guinda-oscuro-rgb: 97, 18, 50;

  /* Amarillo Claro - PANTONE 7402 C */
  --color-amarillo: #e6d194;
  --color-amarillo-rgb: 230, 209, 148;

  /* Colores Adicionales */
  --color-blanco: #ffffff;
  --color-blanco-rgb: 255, 255, 255;

  /* Fondos y Superficies */
  --bg-principal: var(--color-guinda);
  --bg-oscuro: var(--color-guinda-oscuro);
  --bg-claro: #f9f9f9;
  --bg-blanco: var(--color-blanco);

  /* Textos */
  --text-principal: var(--color-negro);
  --text-secundario: var(--color-gris);
  --text-blanco: var(--color-blanco);
  --text-guinda: var(--color-guinda);

  /* Bordes */
  --border-color: #e0e0e0;
  --border-color-dark: var(--color-gris);

  /* Sombras */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 8px 14px 6px rgba(124, 124, 124, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Espaciados */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Bordes redondeados */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transiciones */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* Tamaños de fuente base */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */

  /* Pesos de fuente (Noto Sans) */
  --font-weight-thin: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Alturas de línea */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Anchos máximos de contenedor */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/**
 * Utilidades de Color con Opacidad
 * Uso: background-color: rgba(var(--color-guinda-rgb), 0.8);
 */

/* Clases de utilidad para colores de fondo */
.bg-negro {
  background-color: var(--color-negro);
}
.bg-guinda {
  background-color: var(--color-guinda);
}
.bg-dorado {
  background-color: var(--color-dorado);
}
.bg-gris {
  background-color: var(--color-gris);
}
.bg-guinda-oscuro {
  background-color: var(--color-guinda-oscuro);
}
.bg-amarillo {
  background-color: var(--color-amarillo);
}

/* Clases de utilidad para colores de texto */
.text-negro {
  color: var(--color-negro);
}
.text-guinda {
  color: var(--color-guinda);
}
.text-dorado {
  color: var(--color-dorado);
}
.text-gris {
  color: var(--color-gris);
}
.text-guinda-oscuro {
  color: var(--color-guinda-oscuro);
}
.text-amarillo {
  color: var(--color-amarillo);
}

/* Gradientes institucionales */
.bg-gradient-guinda {
  background: linear-gradient(135deg, var(--color-guinda) 0%, var(--color-guinda-oscuro) 100%);
}

.bg-gradient-guinda-horizontal {
  background: linear-gradient(90deg, var(--color-guinda) 0%, var(--color-guinda-oscuro) 100%);
}

.bg-gradient-guinda-vertical {
  background: linear-gradient(180deg, var(--color-guinda) 0%, var(--color-guinda-oscuro) 100%);
}