/* ============================
   Gazapo — Brand Identity v1.0
   Manual de Identidad Visual 2026
   ============================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
  /* === Paleta Principal === */
  --azul-gazapo:    #004d65;   /* Color principal — logo, títulos, bloques */
  --azul-oscuro:    #003749;   /* Fondos oscuros, nav, contraste */
  --coral:          #F4845F;   /* Acento — CTAs, indicadores, alertas */

  /* === Colores de Soporte === */
  --blanco-ui:      #f2f0f7;   /* Superficies limpias, cards */
  --gris-claro:     #B5B4A8;   /* Info secundaria, placeholders */
  --gris-oscuro:    #474D58;   /* Texto corrido, lectura */
  --bordes:         #D0E3E8;   /* Divisorias, inputs, líneas */

  /* === Sistema de Interfaz === */
  --primario:       #004d65;
  --primario-oscuro:#003749;
  --acento:         #F4845F;
  --superficie:     #f2f0f7;
  --texto-primario: #474D58;
  --texto-secundario:#B5B4A8;
  --texto-primario-dark: #474D58;

  /* === Texto sobre fondo oscuro === */
  --texto-claro:    #FFFFFF;
  --texto-claro-sec:#d1e3e8;

  /* === Estados === */
  --success:        #2EB857;
  --success-bg:     #dcfce7;
  --warning:        #D98E04;
  --warning-bg:     #fef9c3;
  --error:          #CA493A;
  --error-bg:       #fee2e2;
  --info:           #3B7EA1;
  --info-bg:        #dbeafe;

  /* === Legacy aliases (backward compat) === */
  --primary-color:  #004d65;
  --gray-color:     #474D58;
  --yellow-color-1: #fef9c3;
  --yellow-color-2: #D98E04;
  --yellow-color-3: #2EB857;
  --green-color-1:  #dcfce7;
  --green-color-2:  #166534;
  --blue-color-1:   #004d65;
  --blue-color-2:   #dbeafe;
  --blue-color-3:   #3B7EA1;

  /* === Tipografía === */
  --font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-h1:   1.5rem;    /* 24px */
  --font-size-h2:   1.125rem;  /* 18px */
  --font-size-body: 0.875rem;  /* 14px */
  --font-size-label:0.75rem;   /* 12px */
  --font-size-small:0.8125rem; /* 13px */

  /* === Radios y sombras === */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --shadow-card:    0 2px 12px rgba(0, 55, 73, 0.08);
  --shadow-elevated:0 4px 20px rgba(0, 55, 73, 0.12);
}

/* === Base body === */
body {
  font-family: var(--font-family);
  color: var(--texto-primario);
  font-size: var(--font-size-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}