/* ============================================================
   Design tokens — ivanhurtado.pe · Avanza País
   Sistema de color accesible (WCAG AA verificado). v1.0
   Fuente de marca: multimedia/logo-limpio.png (navy #243078, magenta #E40078)
   ============================================================ */
:root {
  /* ---------- Rampas de marca (crudas) ---------- */
  --navy-900:    #12163A;   /* casi-negro navy = tinta */
  --navy-800:    #1A2559;
  --navy-700:    #243078;   /* NAVY BASE — primario */
  --navy-600:    #2E3C8C;
  --navy-300:    #6C78A8;   /* navy desaturado (bordes) */

  --magenta-700: #B00062;
  --magenta-600: #C2006A;   /* magenta seguro para TEXTO sobre claro */
  --magenta-500: #E40078;   /* MAGENTA BASE — secundario (relleno) */
  --magenta-300: #FF5AA8;
  --magenta-200: #FFC0DE;

  /* ---------- Acento 1 · Dorado Inti ---------- */
  --gold-700:    #B7770A;   /* dorado seguro para texto sobre claro */
  --gold-600:    #E0930A;
  --gold-500:    #FFB81C;   /* DORADO BASE (relleno / large-text) */
  --gold-100:    #FFECC2;   /* fondo suave */

  /* ---------- Acento 2 · Cian Andino ---------- */
  --cyan-700:    #0E7D8A;   /* cian seguro para texto / botón + blanco */
  --cyan-500:    #17B6C7;   /* CIAN BASE (relleno / large-text) */
  --cyan-300:    #5FD3E0;   /* tinte brillante para modo oscuro */
  --cyan-100:    #DFF4F6;   /* fondo suave */

  /* ---------- Neutros cálidos (arena / piedra) ---------- */
  --sand-50:     #FAF7F2;   /* superficie cálida */
  --sand-100:    #F1ECE3;   /* relleno sutil cálido */
  --sand-200:    #E4DCCF;   /* borde cálido (no-texto) */
  --stone-500:   #6E6656;   /* gris cálido apto para texto */
  --stone-600:   #5A5344;

  /* ---------- Neutros fríos ---------- */
  --white:       #FFFFFF;
  --paper:       #FBFBFE;   /* fondo base claro */
  --line:        #E6E8F2;   /* divisor frío */
  --ink:         #12163A;   /* texto principal */
  --muted:       #5A6180;   /* texto secundario */

  /* ---------- Semánticos ---------- */
  --success-700: #0A6E4B;
  --success-500: #0F9D6B;
  --success-100: #DCF5EC;
  --warning-700: #B7770A;
  --warning-500: #FFB81C;
  --warning-100: #FFECC2;
  --danger-700:  #A81E2C;
  --danger-500:  #D62839;
  --danger-100:  #FDE7E9;
  --info-700:    #0E7D8A;
  --info-500:    #17B6C7;
  --info-100:    #DFF4F6;

  /* ============================================================
     ROLES SEMÁNTICOS — usar SIEMPRE estos en los componentes
     ============================================================ */
  --bg:            var(--paper);
  --bg-warm:       var(--sand-50);
  --surface:       var(--white);
  --surface-2:     var(--sand-100);
  --border:        var(--line);
  --border-warm:   var(--sand-200);

  --text:          var(--ink);
  --text-muted:    var(--muted);
  --text-warm:     var(--stone-500);
  --text-on-fill:  var(--white);
  --text-on-accent:var(--navy-700);

  --primary:       var(--navy-700);
  --primary-hover: var(--navy-800);
  --secondary:     var(--magenta-500);
  --secondary-hover:var(--magenta-600);
  --accent-gold:   var(--gold-500);
  --accent-cyan:   var(--cyan-500);

  --link:          var(--navy-700);
  --link-alt:      var(--magenta-600);

  --success:       var(--success-500);
  --warning:       var(--warning-700);
  --danger:        var(--danger-500);
  --info:          var(--info-500);

  --focus-ring:    var(--cyan-500);

  /* ---------- No-color ---------- */
  --font-display: "Sora", "Poppins", system-ui, sans-serif;
  --font-poster:  "Archivo Black", "Sora", system-ui, sans-serif;  /* titulares de cartel */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:  8px;      /* menos redondez = más tensión editorial */
  --radius-sm: 5px;
  --shadow: 0 10px 30px -12px rgba(18,22,58,.28);
  --shadow-sm: 0 4px 14px -8px rgba(18,22,58,.25);
  --maxw: 1120px;
}

/* ============================================================
   MODO OSCURO — sistema o [data-theme="dark"]
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0E1030; --bg-warm:#141636; --surface:#181C4A; --surface-2:#22276A;
    --border:#2A2E63; --border-warm:#33305A;
    --text:#EDEFF8; --text-muted:#A6ACC9; --text-warm:#C9B79A;
    --text-on-fill:#FFFFFF; --text-on-accent:#0E1030;
    --primary:var(--magenta-500); --primary-hover:var(--magenta-600);
    --secondary:var(--navy-600); --secondary-hover:var(--navy-700);
    --accent-cyan:var(--cyan-300);
    --link:var(--cyan-300); --link-alt:var(--magenta-300);
    --success:#2FCB92; --warning:var(--gold-500); --danger:#FF6B78; --info:var(--cyan-300);
    --focus-ring:var(--cyan-300);
    --shadow: 0 12px 32px -14px rgba(0,0,0,.6);
    --shadow-sm: 0 6px 18px -10px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg:#0E1030; --bg-warm:#141636; --surface:#181C4A; --surface-2:#22276A;
  --border:#2A2E63; --border-warm:#33305A;
  --text:#EDEFF8; --text-muted:#A6ACC9; --text-warm:#C9B79A;
  --text-on-fill:#FFFFFF; --text-on-accent:#0E1030;
  --primary:var(--magenta-500); --primary-hover:var(--magenta-600);
  --secondary:var(--navy-600); --secondary-hover:var(--navy-700);
  --accent-cyan:var(--cyan-300);
  --link:var(--cyan-300); --link-alt:var(--magenta-300);
  --success:#2FCB92; --warning:var(--gold-500); --danger:#FF6B78; --info:var(--cyan-300);
  --focus-ring:var(--cyan-300);
  --shadow: 0 12px 32px -14px rgba(0,0,0,.6);
  --shadow-sm: 0 6px 18px -10px rgba(0,0,0,.55);
}