/* ──────────────────────────────────────────────────────────
   variables.css — Design System CETPRO HZG
   Estructura: PUCP modernizada · Paleta institucional CETPRO
   ────────────────────────────────────────────────────────── */

:root {
  /* ── Paleta institucional CETPRO (refinada del logo escudo) ── */
  /* Azul marino institucional refinado */
  --primary:        #0B2545;   /* Navy profundo del escudo */
  --primary-dark:   #061833;
  --primary-darker: #030E1F;
  --primary-light:  #1E3A6B;
  --primary-soft:   #EAF0F8;   /* Azul muy claro para fondos */

  /* Rojo institucional del escudo */
  --accent:         #D62828;
  --accent-hover:   #A8201F;
  --accent-soft:    #FCEAEA;

  /* Amarillo institucional */
  --highlight:      #F4C81D;
  --highlight-dark: #C9A500;

  /* ── Paleta funcional PUCP-style ── */
  --bg:             #FFFFFF;
  --bg-soft:        #F7F8FA;   /* Secciones alternas (gris cálido) */
  --bg-deep:        #EDF0F4;
  --ink:            #1F2330;   /* Texto principal */
  --ink-soft:       #4A5063;
  --ink-mute:       #7A8197;
  --line:           #E1E5EB;   /* Bordes hairline */
  --line-strong:    #C8CFDA;
  --white:          #FFFFFF;

  /* Aliases compatibilidad */
  --bg-alt:         var(--bg-soft);
  --bg-dark:        var(--primary-darker);
  --text:           var(--ink);
  --text-light:     #FFFFFF;
  --text-muted:     var(--ink-mute);
  --border:         var(--line);
  --paper:          var(--bg);
  --paper-deep:     var(--bg-soft);

  /* ── Tipografía PUCP usa Montserrat. Mezclamos con Manrope (cuerpo)
        para sentir un peldaño más moderno + Fraunces solo en titulares
        editoriales muy puntuales. ── */
  --font-display:   'Montserrat', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:      'Manrope', system-ui, -apple-system, sans-serif;
  --font-serif:     'Fraunces', Georgia, serif;
  --font-heading:   var(--font-display);

  /* ── Escalas ── */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    clamp(1.5rem, 2.5vw, 2rem);
  --fs-2xl:   clamp(2rem,   4vw, 3rem);
  --fs-3xl:   clamp(2.5rem, 5.5vw, 4.5rem);
  --fs-hero:  clamp(2rem,   4.5vw, 3.5rem);    /* Hero noticia destacada */
  --fs-cifra: clamp(3rem, 6vw, 5rem);           /* Cifras gigantes */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-widest: 0.14em;

  /* ── Radios — PUCP usa muy poco radius, modernizamos suave ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── Sombras modernas suaves ── */
  --shadow-xs:   0 1px 2px rgba(31,35,48,0.06);
  --shadow-sm:   0 2px 8px rgba(31,35,48,0.08);
  --shadow-md:   0 8px 24px -8px rgba(31,35,48,0.18);
  --shadow-lg:   0 20px 50px -15px rgba(31,35,48,0.28);
  --shadow-card-hover: 0 22px 50px -20px rgba(57,57,78,0.32);

  /* ── Espaciado generoso (PUCP-style) ── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    40px;
  --space-2xl:   64px;
  --space-3xl:   96px;
  --space-4xl:   140px;

  /* ── Contenedores PUCP usa 1170/1280px ── */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 720px;
  --container-sm:   900px;

  /* ── Transiciones suaves ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:  220ms var(--ease-out);
  --t-med:   400ms var(--ease-out);
  --t-slow:  700ms var(--ease-out);

  --z-topbar: 90;
  --z-nav:    100;
  --z-modal:  500;
  --z-flash:  1000;
}

html { background: var(--bg); }
body { font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; }