/* ══════════════════════════════════════════════════════════
   VARIABLES — Macro Procesos UPV
   Basado en la guía de identidad corporativa UPV
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Colores corporativos UPV ── */
  --grey-upv-light:  #C5C8C8;
  --grey-upv:        #424445;
  --grey-upv-dark:   #3F4444;
  --grey-darkest:    #363636;
  --grey-dark:       #6B6B6B;
  --grey-medium:     #C1C1C1;
  --grey-light:      #F1F1F1;
  --grey-bg:         #F7F8F8;

  --red:             #E5564F;
  --red-dark:        #D73333;
  --red-darkest:     #A40E0E;

  --yellow:          #FFD100;
  --yellow-dark:     #B4A500;

  --teal:            #38DFC2;
  --teal-dark:       #25BFC2;
  --teal-darkest:    #01A0A0;

  --white:           #FFFFFF;
  --black:           #111111;

  /* ── Layout ── */
  --topbar-h:        34px;
  --header-h:        64px;
  --nav1-h:          38px;
  --nav2-h:          34px;
  --chrome-h:        calc(var(--topbar-h) + var(--header-h) + var(--nav1-h) + var(--nav2-h));
  --footer-h:        52px;

  /* ── Typography ── */
  --font-head:       'Poppins', sans-serif;
  --font-body:       'Inter', sans-serif;

  /* ── Shadows ── */
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:       0 2px 10px rgba(0,0,0,0.1);
  --shadow-lg:       0 8px 25px rgba(0,0,0,0.14);

  /* ── Radii ── */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;

  /* ── Transitions ── */
  --ease:            0.25s ease;
  --ease-slow:       0.45s cubic-bezier(0.4,0,0.2,1);

  /* ── Chapter color (set dynamically by JS) ── */
  --ch-color:        var(--red-dark);
  --ch-light:        #fdecea;
}