/**
 * Variables CSS - Tokens de Diseño PROFECO
 * Basado en el manual de identidad gráfica oficial
 */

:root {
  /* ============================================
     COLORES MARCA — GUINDA (color primario)
     ============================================ */
  --color-guinda: #9b2247; /* PANTONE 7420 C — botones, CTAs, headers */
  --color-guinda-oscuro: #611232; /* PANTONE 7421 C — hover, nav activo, footer */

  /* ============================================
     COLORES MARCA — DORADO (color de acento)
     ============================================ */
  --color-dorado: #a57f2c; /* PANTONE 1255 C — íconos, badges, subrayados */
  --color-dorado-medio: #e6d194; /* PANTONE 7402 C — cards destacadas, tooltips */
  --color-dorado-claro: #eee0c7; /* Dorado claro — bordes decorativos, texto sobre guinda */
  --color-dorado-palido: #f7f5f1; /* Dorado pálido — fondo base de la página */

  /* Alias histórico — mantenido para compatibilidad con styles.css existente */
  --color-amarillo: var(--color-dorado-claro);

  /* ============================================
     ESCALA DE GRISES OFICIAL
     ============================================ */
  --gris-50: #fafafa;
  --gris-100: #f5f5f5;
  --gris-200: #e5e5e5;
  --gris-300: #d4d4d4;
  --gris-400: #a3a3a3;
  --gris-500: #737373;
  --gris-600: #525252;
  --gris-700: #404040;
  --gris-800: #262626;
  --gris-900: #171717;

  /* ============================================
     COLORES SEMÁNTICOS
     ============================================ */
  --color-negro: var(--gris-900); /* #171717 — texto principal fuerte */
  --color-gris: var(--gris-500); /* #737373 — texto secundario */
  --color-blanco: #ffffff;

  /* Tokens semánticos de uso en componentes */
  --color-primario: var(--color-guinda);
  --color-primario-oscuro: var(--color-guinda-oscuro);
  --color-acento: var(--color-dorado);
  --color-acento-claro: var(--color-dorado-medio);
  --color-texto: var(--gris-700);
  --color-texto-fuerte: var(--gris-900);
  --color-texto-suave: var(--gris-600);

  /* Fondos */
  --color-fondo: var(--color-dorado-palido); /* fondo base de página */
  --color-fondo-alterno: var(--gris-100);
  --bg-principal: var(--color-guinda);
  --bg-oscuro: var(--color-guinda-oscuro);
  --bg-claro: var(--gris-100);
  --bg-blanco: var(--color-blanco);

  /* Textos (aliases legacy) */
  --text-principal: var(--color-texto-fuerte);
  --text-secundario: var(--color-texto-suave);
  --text-blanco: var(--color-blanco);
  --text-guinda: var(--color-guinda);

  /* ============================================
     GOBIERNO DE MÉXICO (franjas obligatorias)
     ============================================ */
  --color-gobmx-verde: #006847;
  --color-gobmx-rojo: #a82828;

  /* ============================================
     ESTADOS UI
     ============================================ */
  --color-exito: #2e7d32;
  --color-exito-fondo: #e8f5e9;
  --color-advertencia: #e65100;
  --color-advertencia-fondo: #fff3e0;
  --color-error: var(--color-guinda);
  --color-error-fondo: #fdeaee;
  --color-info: #01579b;
  --color-info-fondo: #e1f5fe;

  /* ============================================
     BORDES
     ============================================ */
  --border-color: var(--gris-200);
  --border-color-dark: var(--gris-400);

  /* ============================================
     SOMBRAS
     ============================================ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.06);

  /* ============================================
     ESPACIADO — base 4px
     ============================================ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Aliases legacy usados en styles.css */
  --spacing-xs: 0.5rem; /* 8px  */
  --spacing-sm: 1rem; /* 16px */
  --spacing-md: 1.5rem; /* 24px */
  --spacing-lg: 2rem; /* 32px */
  --spacing-xl: 3rem; /* 48px */

  /* ============================================
     BORDES REDONDEADOS
     ============================================ */
  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 12px;
  --radio-xl: 24px;
  --radio-full: 9999px;

  /* Aliases legacy */
  --radius-sm: var(--radio-sm);
  --radius-md: var(--radio-md);
  --radius-lg: var(--radio-lg);
  --radius-xl: var(--radio-xl);

  /* ============================================
     TIPOGRAFÍA — Noto Sans en todos los niveles
     ============================================ */
  --fuente-titulos: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --fuente-cuerpo: "Noto Sans", Arial, sans-serif;
  --fuente-mono: "Courier New", Courier, monospace;

  /* Escala tipográfica */
  --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 */
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* Aliases legacy */
  --font-weight-thin: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Alturas de línea */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Aliases legacy */
  --line-height-tight: var(--leading-tight);
  --line-height-normal: var(--leading-normal);
  --line-height-relaxed: var(--leading-relaxed);

  /* ============================================
     CONTENEDORES — alineados con Bootstrap 5
     ============================================ */
  --contenedor-sm: 540px;
  --contenedor-md: 720px;
  --contenedor-lg: 960px;
  --contenedor-xl: 1140px;
  --contenedor-xxl: 1320px;

  /* Aliases legacy */
  --container-sm: var(--contenedor-sm);
  --container-md: var(--contenedor-md);
  --container-lg: var(--contenedor-lg);
  --container-xl: var(--contenedor-xl);
  --container-xxl: var(--contenedor-xxl);

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

  /* ============================================
     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
   ============================================ */

/* Fondos */
.bg-guinda {
  background-color: var(--color-guinda);
}
.bg-guinda-oscuro {
  background-color: var(--color-guinda-oscuro);
}
.bg-dorado {
  background-color: var(--color-dorado);
}
.bg-dorado-medio {
  background-color: var(--color-dorado-medio);
}
.bg-dorado-claro {
  background-color: var(--color-dorado-claro);
}
.bg-dorado-palido {
  background-color: var(--color-dorado-palido);
}
.bg-negro {
  background-color: var(--color-negro);
}
.bg-gris {
  background-color: var(--color-gris);
}
/* Alias legacy */
.bg-amarillo {
  background-color: var(--color-dorado-claro);
}

/* Textos */
.text-guinda {
  color: var(--color-guinda) !important;
}
.text-guinda-oscuro {
  color: var(--color-guinda-oscuro) !important;
}
.text-dorado {
  color: var(--color-dorado) !important;
}
.text-negro {
  color: var(--color-negro) !important;
}
.text-gris {
  color: var(--color-gris) !important;
}
/* Alias legacy */
.text-amarillo {
  color: var(--color-dorado-claro) !important;
}

/* 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%);
}