/* =========================================================
   CONGRESO INNOVA PERICO 2026 — DESIGN TOKENS
   Identidad extraída del isologo oficial (perico + circuito +
   flecha de crecimiento + engranaje + escudo municipal).
   ========================================================= */

:root {

  /* ---------- COLOR: base institucional (del logo) ---------- */
  --color-navy:        #0E3141; /* texto principal, header, "Congreso Innova Perico" */
  --color-navy-700:    #163f52;
  --color-navy-050:    #EAEFF1; /* fondo tenue sobre navy */

  --color-teal:         #0E6A82; /* cuerpo del perico / infraestructura */
  --color-blue:         #1789BE; /* punto azul flecha / calidad */
  --color-green:        #6FAE2E; /* cresta del perico / industria */
  --color-green-700:    #4f8020;
  --color-orange:       #F17F13; /* engranaje / CTA principal / comercio */
  --color-orange-700:   #B5590E; /* hover del naranja */
  --color-purple:       #6C4196; /* punto violeta flecha / financiamiento */

  /* ---------- COLOR: matrices temáticas (mapeo 1 a 1) ---------- */
  --matriz-comercio:        var(--color-orange);
  --matriz-industria:       var(--color-green);
  --matriz-calidad:         var(--color-blue);
  --matriz-financiamiento:  var(--color-purple);
  --matriz-infraestructura: var(--color-teal);

  /* ---------- COLOR: neutros y superficie ---------- */
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F5F8F9; /* secciones alternadas */
  --color-bg-navy:       var(--color-navy);
  --color-border:        #DDE6E9;
  --color-border-strong: #B9C7CC;
  --color-text:          #142A33; /* cuerpo de texto sobre blanco */
  --color-text-muted:    #5E7480;
  --color-text-inverse:  #F2F6F7; /* texto sobre navy */

  /* ---------- COLOR: semántica de estado ---------- */
  --color-success:  var(--color-green);
  --color-info:     var(--color-blue);
  --color-warning:  var(--color-orange);
  --color-danger:   #C0392B;

  /* ---------- TIPOGRAFÍA ---------- */
  /* Display: Poppins — títulos, botones, chips de matriz (peso del logo) */
  /* Body: Inter — texto de lectura, formularios */
  /* Mono: JetBrains Mono — datos, fechas, etiquetas técnicas */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;   /* 12px — labels, meta */
  --text-sm:   0.875rem;  /* 14px — texto secundario */
  --text-base: 1rem;      /* 16px — cuerpo */
  --text-lg:   1.125rem;  /* 18px — cuerpo destacado */
  --text-xl:   1.25rem;   /* 20px — subtítulos de tarjeta */
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 1.875rem);   /* H3 */
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem); /* H2 */
  --text-4xl:  clamp(2.25rem, 1.6rem + 3vw, 3.5rem);    /* H1 hero */

  --leading-tight:  1.15;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ---------- ESPACIADO (base 4px) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* ---------- GRID / LAYOUT ---------- */
  --container-max: 1280px;
  --container-pad: var(--space-4);   /* mobile */
  --grid-gap:      var(--space-5);

  /* ---------- RADIOS ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-sm: 0 1px 2px rgba(14,49,65,.06), 0 1px 3px rgba(14,49,65,.08);
  --shadow-md: 0 4px 12px rgba(14,49,65,.10);
  --shadow-lg: 0 12px 32px rgba(14,49,65,.16);

  /* ---------- TRANSICIONES ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms cubic-bezier(.4,0,.2,1);

  /* ---------- Z-INDEX ---------- */
  --z-nav:    100;
  --z-modal:  1000;
  --z-toast:  1100;
}

@media (min-width: 768px) {
  :root { --container-pad: var(--space-6); }
}